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