绘制反应本机水平规则

我已经试过 本地人的反应软件包-不适合我，也不适合 Android 和 iOS。

下面的代码也不合适，因为它在结尾处呈现三个点

<Text numberOfLines={1}}>
______________________________________________________________
</Text>
243698 次浏览
小开
最佳答案

您可以简单地使用带底部边框的空 View。

<View
style=\{\{
borderBottomColor: 'black',
borderBottomWidth: StyleSheet.hairlineWidth,
}}
/>
小开

你为什么不这样做呢？

<View
style=\{\{
borderBottomWidth: 1,
borderBottomColor: 'black',
width: 400,
}}
/>
小开 
import { View, Dimensions } from 'react-native'


var { width, height } = Dimensions.get('window')


// Create Component


<View style=\{\{
borderBottomColor: 'black',
borderBottomWidth: 0.5,
width: width - 20,}}>
</View>
小开

也许你应该尝试使用反应本地人力资源这样的东西:

<Hr lineColor='#b3b3b3'/>

文件: https://www.npmjs.com/package/react-native-hr

小开

可以使用边距来改变直线的宽度，并将其置于中心位置。

import { StyleSheet } from 'react-native;
<View style = {styles.lineStyle} />


const styles = StyleSheet.create({
lineStyle:{
borderWidth: 0.5,
borderColor:'black',
margin:10,
}
});

如果你想给边距动态然后你可以使用尺寸宽度。

小开

我最近遇到了这个问题。

<Text style={styles.textRegister}> ────────  Register With  ────────</Text>

结果是:

Image

小开

我是这么做的，希望能有帮助

<View style={styles.hairline} />
<Text style={styles.loginButtonBelowText1}>OR</Text>
<View style={styles.hairline} />

风格:

hairline: {
backgroundColor: '#A2A2A2',
height: 2,
width: 165
},


loginButtonBelowText1: {
fontFamily: 'AvenirNext-Bold',
fontSize: 14,
paddingHorizontal: 5,
alignSelf: 'center',
color: '#A2A2A2'
},
小开

你也可以试试 react-native-hr-component

npm i react-native-hr-component --save

你的代码:

import Hr from 'react-native-hr-component'


//..


<Hr text="Some Text" fontSize={5} lineColor="#eee" textPadding={5} textStyles={yourCustomStyles} hrStyles={yourCustomHRStyles} />
小开

可以使用本机元素分隔符。

用以下方法安装:

npm install --save react-native-elements
# or with yarn
yarn add react-native-elements


import { Divider } from 'react-native-elements'

那就说:

<Divider style=\{\{ backgroundColor: 'blue' }} />

来源

小开 
import {Dimensions} from 'react-native'


const { width, height } = Dimensions.get('window')


<View
style=\{\{
borderBottomColor: '#1D3E5E',
borderBottomWidth: 1,
width : width ,
}}
/>
小开

这就是我如何解决水平线和文字在中间的分隔符:

<View style={styles.divider}>
<View style={styles.hrLine} />
<Text style={styles.dividerText}>OR</Text>
<View style={styles.hrLine} />
</View>

还有这个的款式:

import { Dimensions, StyleSheet } from 'react-native'


const { width } = Dimensions.get('window')


const styles = StyleSheet.create({
divider: {
flexDirection: 'row',
alignItems: 'center',
marginTop: 10,
},
hrLine: {
width: width / 3.5,
backgroundColor: 'white',
height: 1,
},
dividerText: {
color: 'white',
textAlign: 'center',
width: width / 8,
},
})
小开

这是在反应本机(JSX)代码，更新到今天:

<View style = {styles.viewStyleForLine}></View>


const styles = StyleSheet.create({
viewStyleForLine: {
borderBottomColor: "black",
borderBottomWidth: StyleSheet.hairlineWidth,
alignSelf:'stretch',
width: "100%"
}
})

你可以使用 alignSelf:'stretch'或 width: "100%"都应该工作..。 还有,

borderBottomWidth: StyleSheet.hairlineWidth

这里 StyleSheet.hairlineWidth是最薄的, 那么,

borderBottomWidth: 1,

等等，以增加线的厚度。

小开

只需创建一个高度较小的 View 组件。

<View style=\{\{backgroundColor:'black', height:10}}/>
小开

如果你有一个坚实的背景(如白色) ，这可能是你的解决方案:

<View style={container}>
<View style={styles.hr} />
<Text style={styles.or}>or</Text>
</View>


const styles = StyleSheet.create({
container: {
flex: 0,
backgroundColor: '#FFFFFF',
width: '100%',
},
hr: {
position: 'relative',
top: 11,
borderBottomColor: '#000000',
borderBottomWidth: 1,
},
or: {
width: 30,
fontSize: 14,
textAlign: 'center',
alignSelf: 'center',
backgroundColor: '#FFFFFF',
},
});
小开

创建一个可重用的 Line组件对我来说很有用:

import React from 'react';
import { View } from 'react-native';


export default function Line() {
return (
<View style=\{\{
height: 1,
backgroundColor: 'rgba(255, 255, 255 ,0.3)',
alignSelf: 'stretch'
}} />
)
}

现在，在任何地方导入和使用 Line:

<Line />
小开

我能够绘制一个具有 flexbox属性的分隔符，即使在行的中心有一个文本。

<View style=\{\{flexDirection: 'row', alignItems: 'center'}}>
<View style=\{\{flex: 1, height: 1, backgroundColor: 'black'}} />
<View>
<Text style=\{\{width: 50, textAlign: 'center'}}>Hello</Text>
</View>
<View style=\{\{flex: 1, height: 1, backgroundColor: 'black'}} />
</View>

enter image description here

小开

另一种方法是:

import { View } from 'react-native';
import { Divider, Text } from 'react-native-paper';


const MyComponent = () => (
<View>
<Text>Lemon</Text>
<Divider />
<Text>Mango</Text>
<Divider />
</View>
);


export default MyComponent;
小开

你可以像这样使用视图来呈现水平规则:

<View style=\{\{ backgroundColor : "your color", height : 1 }} />
小开

我使用这个组件。它有两个道具: 1。破折号的数量。2。破折号的宽度。并像这样使用它:

<Line dashedCount={Math.floor(screenWidth / 12)} dashWidth={8} />

type TLine = {
dashedCount: number;
dashWidth: number;
};


function Line({ dashedCount, dashWidth }: TLine) {
const Dash = ({ dashWidth }) => (
<View
style=\{\{
height: 1,
backgroundColor: 'rgba(255, 255, 255 ,0.3)',
alignSelf: 'stretch',
width: dashWidth
}}
/>
);
const dashed = Array(dashedCount).fill(<Dash dashWidth={dashWidth} />);


return (
<View
style=\{\{
flexDirection: 'row',
justifyContent: 'space-between'
}}
>
{dashed}
</View>
);
}
小开

用于 React native<Text style=\{\{ height:1,width:"100%",backgroundColor:"black",margin:5}}></Text>中的水平线

小开

使用一个空的视图，并给它 CSS 样式, 在视图中，为不能忽略的视图放置一个空文本，如下面的代码片段所示

<View style=\{\{ height: 1, width: "100%",backgroundColor: "black",}}><Text></Text></View>
小开

您可以将其与本机基本包一起使用

<Flex alignItems='center' justifyContent='center' direction='row'>
<Divider width={150} mx="5" />
<Text>OR</Text>
<Divider width={150} mx="5" />
</Flex>
小开

只需添加下面的代码就可以得到你想要的结果: <View style=\{\{ borderBottomColor: 'black', borderBottomWidth: 1, }} />


提交答案