如何在本机反应中绘制虚线边框样式答案

【问题标题】：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？瑞特
github.com/facebook/react-native/issues/17251 勾选这个，是的
谢谢一个问题，如果我必须删除顶部边框呢？我怎样才能删除它？
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>

【讨论】：