Menggambar aturan horizontal dalam Bereaksi Asli

I've mencoba bereaksi-asli-hr paket - doesn't bekerja untuk saya maupun di Android maupun di iOS.

Berikut kode ini juga tidak cocok karena membuat tiga titik di akhir

<Text numberOfLines={1}}>               
    ______________________________________________________________
</Text>
Pemrograman
react-native
12 April 2017 в 9:53
8 tayangan
Larutan

Anda hanya bisa menggunakan kosong Melihat dengan batas bawah.

Komentar (6)

Satu dapat menggunakan margin dalam rangka untuk mengubah lebar baris dan menempatkannya pusat.

import { StyleSheet } from 'react-native;


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

jika anda ingin memberikan margin yang dinamis maka anda dapat menggunakan Dimensi lebar.

Smit
Jawaban edit 26 September 2018 в 4:06
Komentar (3)

Baru-baru ini saya mengalami masalah ini.

 ────────  Register With  ────────

dengan hasil ini:

Stephen Rauch
Jawaban edit 6 Agustus 2017 в 4:40
Komentar (6)

Aku melakukan hal seperti ini. Semoga ini bisa membantu 


OR

untuk gaya:

hairline: {
  backgroundColor: '#A2A2A2',
  height: 2,
  width: 165
},

loginButtonBelowText1: {
  fontFamily: 'AvenirNext-Bold',
  fontSize: 14,
  paddingHorizontal: 5,
  alignSelf: 'center',
  color: '#A2A2A2'
},
ndmeiri
Jawaban edit 23 Januari 2018 в 9:22
Komentar (2)

Anda juga dapat mencoba bereaksi-asli-hr-komponen

npm i react-native-hr-component --save

Kode anda:

import Hr from 'react-native-hr-component'

//..

<Hr text="Some Text" fontSize={5} lineColor="#eee" textPadding={5} textStyles={yourCustomStyles} hrStyles={yourCustomHRStyles} />
Komentar (1)

Ini adalah dalam Bereaksi Asli (BEJ) kode diperbarui untuk hari ini: 



const styles = StyleSheet.create({
viewStyleForLine: {
    borderBottomColor: "black", 
    borderBottomWidth: StyleSheet.hairlineWidth, 
    alignSelf:'stretch',
    width: "100%"
  }
})

anda dapat menggunakan salah alignSelf:&#39;peregangan&#39; atau lebar: "100%" keduanya harus bekerja... dan, 

borderBottomWidth: StyleSheet.hairlineWidth

di sini StyleSheet.hairlineWidth adalah yang tertipis, kemudian, 

borderBottomWidth: 1,

dan sebagainya untuk meningkatkan ketebalan garis.

Wai Ha Lee
Jawaban edit 18 April 2019 в 8:47
Komentar (0)

Mengapa don't anda melakukan sesuatu seperti ini?

Komentar (0)
import { View, Dimensions } from 'react-native'

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

// Create Component
José Fonte
Jawaban edit 1 Juni 2017 в 12:49
Komentar (0)

Mungkin anda harus mencoba menggunakan bereaksi-asli-hr sesuatu seperti ini:

<Hr lineColor='#b3b3b3'/>

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

Komentar (1)

Hanya membuat Tampilan komponen yang memiliki ketinggian kecil.

Komentar (0)

Anda dapat menggunakan native elemen pembagi.

Install dengan:

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

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

Kemudian pergi dengan:

Sumber

Philipp
Jawaban edit 30 Juni 2019 в 4:36
Komentar (1)
import {Dimensions} from 'react-native'

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

Ini adalah bagaimana saya memecahkan pembagi dengan garis-garis horizontal dan teks dalam midddle:



  OR

Dan gaya ini:

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,
  },
})
Komentar (0)