我尝试了react-native-hr包，但在Android和iOS上都无法正常工作。
以下代码也不适合，因为它会在末尾渲染三个点
<Text numberOfLines={1}}>
______________________________________________________________
</Text>
在React Native中绘制水平线
176
- humkins
1
<Text>__________ 等级 {level} __________</Text> - Omar bakhsh
25个回答
464
您可以使用一个带有底部边框的空视图。
<View
style={{
borderBottomColor: 'black',
borderBottomWidth: StyleSheet.hairlineWidth,
}}
/>
- Antoine Grandchamp
6
72我建议使用
borderBottomWidth: StyleSheet.hairlineWidth :) - Ryan Pergent31如果不起作用，请考虑添加alignSelf:'stretch'。 - Scientist1642
5你应该为视图指定 WIDTH 值。 - Mohamed Ben Hartouz
1通过这个可以画出一条线，但是左右两边有一定的间距。我想要画到两端。 - Abhi
@Abhi 这似乎是与此答案无关的问题。如果您找不到解决方案，请创建一个新问题。 - Antoine Grandchamp
2在一些设备上，borderBottomWidth: StyleSheet.hairlineWidth 将不会显示（至少在 RN 0.61 版本中）。 - Stich
107
我能使用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>
- Azhar Zafar
2
6这是最佳答案，它具有可扩展性，如果您不设置文本宽度，它将是动态的。 - Newoda
2对于文本组件，请移除样式宽度并添加paddingHorizontal，否则文本将以50像素的框格式化。
<Text style={{textAlign: 'center', paddingHorizontal:8}}>你好朋友们！</Text> - kopacabana29
可以使用margin来改变一条线的宽度并将其置于中心位置。
import { StyleSheet } from 'react-native;
<View style = {styles.lineStyle} />
const styles = StyleSheet.create({
lineStyle:{
borderWidth: 0.5,
borderColor:'black',
margin:10,
}
});
如果您想动态地设置边距，那么您可以使用尺寸宽度（Dimension width）。
- Smit Thakkar
3
谢谢。你也可以只写
<View style = {styles.lineStyle} />，因为中间没有任何内容;-) - Martin NordströmSmit的
styles.lineStyle应该对应于这里的const styles = StyleSheet.create({ lineStyle: ... });。而你只有lineStyle = { ...}，这会导致问题。一个完整的解决方案是使用styles.lineStyle，可以这样写：const styles = StyleSheet.create({ lineStyle: { borderWidth: 0.5, borderColor: 'black', margin: 10 } });。 - kevr是的，你说得对。在这里，我假设你将
lineStyle 放在了你的 StyleSheet 中。 - Smit Thakkar14
我最近遇到了这个问题。
<Text style={styles.textRegister}> ──────── Register With ────────</Text>
由此结果：
- Martin Chinome
7
29这不具有良好的可扩展性。 - Petrus Theron
as simple as that. - Siraj Alam
@NateGlenn 在窄屏幕上连字符会换行，而在宽屏幕上则会显得太细。 - Petrus Theron
1啊，这很有道理。如果你只需要一个非常短的行，我认为这个解决方案是可以的。 - Nate Glenn
这并不被推荐。 - Godfrey
显示剩余2条评论
10
我是这样做的。希望能对你有帮助。
<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'
},
- sarin upreti
2
我认为这是最好的解决方案，比其他答案使用边框更好。 - Erick M. Sprengel
硬编码宽度可能会有些问题。 - Godfrey
7
您可以尝试使用
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} />
- mehulmpt
1
8有点过头了。 - arled
7
创建可重用的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 />
- Mohammad Zaid Pathan
6
以下是今天更新的 React Native（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,
等等，以增加线条的厚度。
- Sree
3
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>
- Filip Ilievski
2
你可以使用本地元素分隔线。
安装方法如下：
然后使用以下方法:
安装方法如下：
npm install --save react-native-elements
# or with yarn
yarn add react-native-elements
import { Divider } from 'react-native-elements'
然后使用以下方法:
<Divider style={{ backgroundColor: 'blue' }} />
- shanthan
2
2如果你只需要一条水平线，安装整个（很可能是庞大的）软件包似乎有些过度。 - Sandy
虽然如果您只使用
<Divider />组件，这可能有些过度，但是无论如何，您都应该使用库来节省时间并样式化简单的按钮、搜索栏等等...查看它为您的应用程序所能做的一切
https://react-native-elements.github.io/react-native-elements/ - Jonathan Sanchez网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接