reactjs 如何在react native中绘制虚线边框样式

uwopmtnx  于 2023-03-01  发布在  React
关注(0)|答案(8)|浏览(270)

我正在使用下面的风格,我试图画虚线边框的风格,但它总是来固体。请建议。

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

//谢谢

7gs2gvoe

7gs2gvoe1#

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

laik7k3q

laik7k3q2#

试着跟着它走应该行

borderStyle: 'dotted',
borderRadius: 1,
iibxawm4

iibxawm43#

根据github问题注解(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>
7uzetpgm

7uzetpgm4#

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

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

t40tm48m5#

以下操作将非常有效:

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

3mpgtkmj6#

值得补充的是,需要使用borderRadius将borderRadius应用于全局的所有边,而不是将其应用于单个边,因为这似乎打破了Android上的样式化边界。
在我的例子中,我使用的是Tailwind实用程序样式rounded-2xl

"rounded-2xl": {
        "borderTopLeftRadius": 16,
        "borderTopRightRadius": 16,
        "borderBottomRightRadius": 16,
        "borderBottomLeftRadius": 16
    }

把这个换成borderRadius: 16对我来说解决了这个问题。

3wabscal

3wabscal7#

尝试将其添加到代码中

<View style={{borderWidth:1, borderStyle="dashed", width:100, height:100}}></Text>
2nbm6dog

2nbm6dog8#

删除边框顶部颜色

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

相关问题