在React Native中绘制水平线

Question

我尝试过react-native-hr软件包 - 不适用于我,也不适用于Android或iOS.

以下代码也不合适,因为它在结尾处呈现三个点

<Text numberOfLines={1}}>               
    ______________________________________________________________
</Text>

Answer 1

您可以简单地使用带有底部边框的空视图.

<View
  style={{
    borderBottomColor: 'black',
    borderBottomWidth: 1,
  }}
/>

Answer 2

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>

Answer 3

可以使用边距来改变线条的宽度并将其放在中心位置.

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

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

如果要动态提供边距,则可以使用尺寸宽度.

Answer 4

我最近有这个问题.

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

结果如下:

Answer 5

我是这样做的。希望这可以帮助

<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'
},

Answer 6

创建一个可重用的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 />

Answer 7

这是 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,

等等以增加线条的粗细。

Answer 8

您也可以尝试 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} />