Нарисуйте горизонтальное правило в React Native

Ответ 1

Вы можете просто использовать пустой вид с нижней границей.

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

Ответ 2

Можно использовать поле для изменения ширины линии и размещения ее в центре.

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

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

если вы хотите динамически задавать поле, тогда вы можете использовать Dimension width.

Ответ 3

У меня недавно была эта проблема.

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

с этим результатом:

Ответ 4

Я сделал это так. Надеюсь, что это поможет

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

Ответ 5

Вы также можете попробовать 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} />

Ответ 6

Почему бы вам не сделать что-то подобное?

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

Ответ 7

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>

Ответ 8

Это код 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,

и так далее, чтобы увеличить толщину линии.

Ответ 9

Возможно, вам стоит попробовать использовать response-native-hr примерно так:

<Hr lineColor='#b3b3b3'/>

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

Ответ 10

Вы можете использовать собственный разделитель элементов.

Установите его с помощью:

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

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

Затем перейдите с:

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

Источник

Ответ 11

import {Dimensions} from 'react-native'

const { width, height } = Dimensions.get('window')

<View
  style={{
         borderBottomColor: '#1D3E5E',
         borderBottomWidth: 1,
         width : width , 
  }}
/>

Ответ 12

Вот как я решил разделитель с горизонтальными линиями и текстом в середине:

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

Ответ 13

Просто создайте компонент View, который имеет небольшую высоту.

<View style={{backgroundColor:'black', height:10}}/>