วาดกฎแนวนอนใน React Native

ฉันได้ลองใช้แพ็คเกจreact-native-hr แล้ว - ไม่ได้ผลสำหรับฉันหรือบน Android หรือบน iOS

โค้ดต่อไปนี้ไม่เหมาะเช่นกันเนื่องจากแสดงจุดสามจุดในตอนท้าย

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

คุณสามารถใช้มุมมองที่ว่างเปล่าที่มีเส้นขอบด้านล่าง

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

เราสามารถใช้ระยะขอบเพื่อเปลี่ยนความกว้างของเส้นและวางไว้ตรงกลาง

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>

ด้วยผลลัพธ์นี้:

ฉันทำแบบนี้ หวังว่านี่จะช่วยได้

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

ฉันสามารถวาดตัวคั่นที่มี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>

คุณยังสามารถลอง 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} />

สิ่งนี้อยู่ในโค้ด 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,

และอื่น ๆ เพื่อเพิ่มความหนาของเส้น

การสร้าง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 />

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>

คุณสามารถใช้ตัวแบ่งองค์ประกอบดั้งเดิม

ติดตั้งด้วย:

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

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

จากนั้นไปกับ:

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

ที่มา

ทำไมคุณไม่ทำอะไรแบบนี้?

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

บางทีคุณควรลองใช้ react-native-hr ดังนี้:

<Hr lineColor='#b3b3b3'/>

เอกสารประกอบ: https://www.npmjs.com/package/react-native-hr

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

เพียงแค่สร้างส่วนประกอบ 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',
  },
});