【问题标题】:How to draw dashed border style in react native如何在本机反应中绘制虚线边框样式
【发布时间】:2022-01-17 21:02:48
【问题描述】:

我正在使用下面的样式,我正在尝试绘制虚线边框样式,但它始终是实心的。请提出建议。

<View style={{paddingLeft:10,
 height:300, marginBottom:10, 
 borderWidth:1,
 borderStyle: 'dashed',
 borderColor:'red',
 borderTopColor:'white'}}>

//谢谢

【问题讨论】:

    标签: javascript css reactjs react-native


    【解决方案1】:

    您需要添加borderRadius: 1 才能使其工作。

    【讨论】:

    • 在这种风格中,我只需要添加borderRadius:1?瑞特
    • 谢谢一个问题,如果我必须删除顶部边框呢?我怎样才能删除它?
    • Abhigyan 试试这个borderBottomLeftRadius:数字borderBottomRightRadius:数字borderTopLeftRadius:数字borderTopRightRadius:数字您还将阅读这篇文章,这将为您提供有关样式的更多信息----facebook.github.io/react-native/docs/stylesheet
    • 注意:在撰写本文时,将 borderStyle 应用于单个边框边缘在 React Native 0.63.2 中已损坏,但有一个开放的 PR 可以解决此限制:github.com/facebook/react-native/pull/29099
    【解决方案2】:

    尝试遵循它应该可以工作

    borderStyle: 'dotted',
    borderRadius: 1,
    

    【讨论】:

    • 谢谢。一个问题,如果我必须删除顶部边框呢?我怎样才能删除它?
    • 注意:在撰写本文时,将 borderStyle 应用于单个边框边缘在 React Native 0.63.2 中被破坏,但有一个开放的 PR 可以解决此限制:github.com/facebook/react-native/pull/29099
    【解决方案3】:

    以下将完美运行:

    <View style={{
      paddingLeft:10,
      height:300,
      marginBottom:10,
      borderStyle: 'dashed',
      borderRadius: 1,
      borderWidth: 1,
      borderColor: 'red',
      borderTopColor:'white'
     }} />
    

    【讨论】:

      【解决方案4】:

      试试这个对我来说很好;-)

      <View style={{ height: '100%',
                     borderRadius : 1,
                     width: '100%',
                     borderStyle: 'dashed',
                     borderWidth: 1,
                     borderColor: 'rgba(161,155,183,1)'}} />
      

      【讨论】:

      • 谢谢,但是为什么不指定borderRadius就不能工作
      【解决方案5】:

      根据github issue cmets (https://github.com/facebook/react-native/issues/24224):

      <View style={[{ height: 1, overflow: 'hidden' }]}>
        <View style={[{ height: 2, borderWidth: 1, borderColor: '#ddd', borderStyle: 'dashed' }]}></View>
      </View>
      

      【讨论】:

        猜你喜欢
        • 2020-03-02
        • 2017-07-19
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多