在React Native中绘制水平线

96

我已经尝试了react-native-hr软件包-不适用于我，Android和iOS。

后面的代码也不适合，因为它在结尾处渲染了三个点

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

react-native

— 胶金
source

<Text> __________ Level {level} __________ </ Text>

— Omar bakhsh

294

您可以简单地使用带有底边框的空视图。

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

— 安托万·格兰尚（Antoine Grandchamp）
source

49

我建议borderBottomWidth: StyleSheet.hairlineWidth:)

— 瑞安·佩金特

16

如果不起作用，请考虑添加alignSelf：'stretch'。

— Scientist1642

1

您应该为视图指定WIDTH值。

— Mohamed Ben Hartouz '19

通过这样可以画线，但是左右有一个边距。我想端到端画

— Abhi

@Abhi似乎是与该答案无关的问题。请创建一个新的问题，如果你没有找到一个解决方案

— 安托万Grandchamp

22

可以使用边距来更改线条的宽度并将其居中放置。

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

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

如果要动态给定边距，则可以使用尺寸宽度。

— 史密斯
source

谢谢。您也可能只是<View style = {styles.lineStyle} />因为两者之间没有任何关系；-)

— 马丁·诺德斯特罗姆（MartinNordström）

Smitstyles.lineStyle将对应于const styles = StyleSheet.create({ lineStyle: ... });此处。您只有lineStyle = { ...}那会导致问题。的完整解决方案styles.lineStyle可能是const styles = StyleSheet.create({ lineStyle: { borderWidth: 0.5, borderColor: 'black', margin: 10 } });。

— kevr

是的你是对的。在这里，我假设您将lineStyle样式表放入其中。

— Smit

12

我最近有这个问题。

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

结果如下：

— 马丁·奇诺姆
source

25

这不能很好地扩展

— Petrus Theron

就如此容易。

— Siraj Alam

@PetrusTheron为什么扩展性不好？

— Nate Glenn

@NateGlenn连字号将在狭窄的显示屏上环绕或在较宽的显示屏上显得太细。

— Petrus Theron

嗯，那很有道理。如果您只需要很短的线，我认为解决方案很好。

— Nate Glenn

9

我是这样做的。希望这可以帮助

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

— 沙林·乌普雷蒂
source

我认为这是最好的解决方案。比像其他答案一样使用边框更好。

— Erick M. Sprengel，

硬编码宽度可能会有点问题。

— 戈弗雷

9

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>

— Azhar Zafar
source

1

这是最好的答案，它可以缩放，如果您不设置文本宽度，它将是动态的

— newoda

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

— Mehulmpt
source

4

有点过分了

— 导致

3

这是在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,

等等以增加线的粗细。

— 斯里
source

3

创建一个可重用的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 />

— 穆罕默德·扎伊德·帕坦（Mohammad Zaid Pathan）
source

2

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>

— 菲利普·伊利耶夫斯基（Filip Ilievski）
source

2

您可以使用本机元素分隔符。

通过以下方式安装：

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

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

然后去：

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

资源

— 香丹
source

2

如果只需要一条水平线，那么安装一个完整的软件包（可能是一个很大的软件包）似乎有点过头了。

— 桑迪

如果只使用<Divider /> 组件，肯定会过分的，但是，您应该使用一种库来节省样式简单按钮，搜索栏等的时间，等等。。。react-native-elements.github.io/react-native-elements

— jso1919

1

你为什么不做这样的事？

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

— 维克托·塞奇（ViktorSeč）
source

0

也许您应该尝试使用react-native-hr这样的东西：

<Hr lineColor='#b3b3b3'/>

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

— J·多里安
source

在回购上查看问题，它似乎不是那么“活跃”，并且在依赖方面还不是最新的：(

— 在

0

import {Dimensions} from 'react-native'

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

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

— 穆罕默德·本·哈图兹
source

该代码对于那些出现此类问题的人来说是如此清晰，因此，如果我能解释更多，我会做的。

— Mohamed Ben Hartouz '19

0

这就是我用中间的水平线和文本解决分隔线的方法：

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

— 拉斯洛
source

0

只需创建一个高度较小的View组件即可。

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

— 公园守护者
source

0

如果您有坚实的背景（例如白色），则可以解决此问题：

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

— 达里乌斯·雷尼（Darius Rainys）
source