在 React Native 中绘制水平线答案

【问题标题】：Draw horizontal rule in React Native在 React Native 中绘制水平线
【发布时间】：2017-09-08 20:48:54
【问题描述】：

我已经尝试过 react-native-hr 包 - 对我、Android 和 iOS 都不起作用。

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

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

【问题讨论】：

__________ 级别 {level} __________

标签： react-native

【解决方案1】：

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

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

【讨论】：

我推荐borderBottomWidth: StyleSheet.hairlineWidth :)
如果不起作用，请考虑添加 alignSelf:'stretch'。
您应该指定视图的 WIDTH 值。
这样可以画线但左右有边距。我想画端到端
在某些设备中，borderBottomWidth: StyleSheet.hairlineWidth 将根本不显示（至少在 RN 0.61 上）

【解决方案2】：

你为什么不做这样的事情？

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

【讨论】：

【解决方案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>

【讨论】：

【解决方案4】：

也许你应该尝试使用 react-native-hr 类似的东西：

<Hr lineColor='#b3b3b3'/>

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

【讨论】：

在 repo 上寻找问题，就依赖关系而言，它似乎并不那么“活跃”和最新:(

【解决方案5】：

可以使用边距来改变线条的宽度并将其置于中心。

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

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

如果您想动态分配边距，则可以使用尺寸宽度。

【讨论】：

谢谢。您也可以只使用<View style = {styles.lineStyle} />，因为两者之间没有任何关系；-)
Smit styles.lineStyle 将对应于此处的 const styles = StyleSheet.create({ lineStyle: ... });。您只有lineStyle = { ...}，这会导致问题。 styles.lineStyle 的完整解决方案可能是 const styles = StyleSheet.create({ lineStyle: { borderWidth: 0.5, borderColor: 'black', margin: 10 } });。
是的。你说得对。在这里，我假设您将 lineStyle 放在样式表中。

【解决方案6】：

我最近遇到了这个问题。

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

结果如下：

【讨论】：

这不能很好地扩展
就这么简单。
@PetrusTheron 为什么不能很好地扩展？
@NateGlenn 连字符会在窄显示器上环绕，或者在宽显示器上显得太细。
啊，有道理。如果您只需要很短的线，我认为该解决方案很好。

【解决方案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'
},

【讨论】：

我认为这是最好的解决方案。比使用边框像其他答案更好。
硬编码宽度可能有点问题。

【解决方案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} />

【讨论】：

这有点矫枉过正

【解决方案9】：

您可以使用原生元素分隔符。

安装它：

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

【讨论】：

如果你只需要一条水平线，安装一个完整的包（可能是一个大包）似乎有点过头了。
当然，如果您只使用<Divider /> 组件，那就太过分了，但是，您应该以任何一种方式使用库来节省设计简单按钮、搜索栏等的时间。 ..检查它可以为您的应用做的所有事情react-native-elements.github.io/react-native-elements

【解决方案10】：

import {Dimensions} from 'react-native'

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

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

【讨论】：

【解决方案11】：

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

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

【讨论】：

【解决方案12】：

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

等等以增加线条的粗细。

【讨论】：

【解决方案13】：

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

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

【讨论】：

【解决方案14】：

如果您有纯色背景（如白色），这可能是您的解决方案：

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

【讨论】：

【解决方案15】：

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

【讨论】：

【解决方案16】：

即使在行的中心有一个文本，我也能用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>

【讨论】：

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

【解决方案17】：

另一种方法：

import { View } from 'react-native';
import { Divider, Text } from 'react-native-paper';

const MyComponent = () => (
  <View>
    <Text>Lemon</Text>
    <Divider />
    <Text>Mango</Text>
    <Divider />
  </View>
);

export default MyComponent;

【讨论】：

【解决方案18】：

你可以像这样使用 View 来渲染一条水平线

<View style={{ backgroudColor : "your color", height : 1 }} />

【讨论】：

有一个错字（在背景上）。应该是<View style={{ backgroundColor: "your color", height: 1 }} />
@ghashi 这不是错字，它只是一个空格，我喜欢在冒号周围留空格
“backgroudColor”缺少一个“n”，因此它应该是“backgroundColor”，（不是“backgroudColor”）

【解决方案19】：

我使用这个组件。它有两个道具： 1. 冲刺需要的数量。 2. 虚线宽度。并像这样使用它：

<Line dashedCount={Math.floor(screenWidth / 12)} dashWidth={8} />

type TLine = {
    dashedCount: number;
    dashWidth: number;
};

function Line({ dashedCount, dashWidth }: TLine) {
    const Dash = ({ dashWidth }) => (
        <View
            style={{
                height: 1,
                backgroundColor: 'rgba(255, 255, 255 ,0.3)',
                alignSelf: 'stretch',
                width: dashWidth
            }}
        />
    );
    const dashed = Array(dashedCount).fill(<Dash dashWidth={dashWidth} />);

    return (
        <View
            style={{
                flexDirection: 'row',
                justifyContent: 'space-between'
            }}
        >
            {dashed}
        </View>
    );
}

【讨论】：