在React Native中绘制水平线

Question

我试过了react-native-hr包 - 对我来说不适用，也不适用于Android或iOS。

下面的代码也不适宜，因为它呈现在年底

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

Answer 1

三个点你可以只使用一个底部边框空视图。

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

Answer 2

你为什么不这样做？

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

Answer 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> 

Answer 4

也许你应该尝试使用反应母语小时是这样的：

<Hr lineColor='#b3b3b3'/> 

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

Answer 5

人们可以为了利用保证金来改变的宽度线并将其置于中心。

<View style = {styles.lineStyle} /> 

lineStyle:{ 
     borderWidth: 0.5, 
     borderColor:'black', 
     margin:10, 
    } 

如果您想要动态给边距，那么您可以使用尺寸宽度。

Answer 6

我最近有这个问题。

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

这个结果：

Answer 7

我做了这个样子。希望这有助于

<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 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} />