【问题标题】: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,
         }
       });
      

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

      【讨论】:

      • 谢谢。您也可以只使用&lt;View style = {styles.lineStyle} /&gt;,因为两者之间没有任何关系;-)
      • 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

      【讨论】:

      • 如果你只需要一条水平线,安装一个完整的包(可能是一个大包)似乎有点过头了。
      • 当然,如果您只使用&lt;Divider /&gt; 组件,那就太过分了,但是,您应该以任何一种方式使用库来节省设计简单按钮、搜索栏等的时间。 ..检查它可以为您的应用做的所有事情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 }} />
                    

                    【讨论】:

                    • 有一个错字(在背景上)。应该是&lt;View style={{ backgroundColor: "your color", height: 1 }} /&gt;
                    • @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>
                        );
                    }
                    

                    【讨论】:

                      猜你喜欢
                      • 1970-01-01
                      • 1970-01-01
                      • 2015-09-14
                      • 1970-01-01
                      • 1970-01-01
                      • 1970-01-01
                      • 1970-01-01
                      • 1970-01-01
                      • 2014-07-31
                      相关资源
                      最近更新 更多