尝试添加虚线边框样式时，出现“不支持虚线/点状边框样式”错误，仅适用于iOS。

Question

这是我的视图样式。

<View
 style={{
          flexDirection: 'column',
          marginTop: 15,
          borderTopWidth: 2,
          borderStyle: 'dashed',
          borderTopColor: 'rgb(225, 225,225)',
          margin: 20,
          alignSelf: 'center',
          paddingTop: 10,
   }}
>

在安卓上，我得到了一个漂亮的虚线。

在iOS上，我没有任何行。

并且

WARN Unsuppported dashed / dotted border style

而包含视图的其余部分根本没有被渲染

- Shep Sims

---

我可以重现这个问题。有趣的是，当删除和重新添加某些样式属性时，它会随机地开始工作，但不可靠。在GitHub上有类似的问题这里，这里和这里，主要是针对Android。对我来说似乎是一个bug，但我不确定。 - David Scholz

Answer 1

我已经在评论中提到，我不确定为什么会出现这种问题，这似乎是一个错误。GitHub上也有类似的问题 here, here 和 here。

由于它在Android上可以工作但在iOS上无法工作，我们可以利用overflow: hidden的使用。这只适用于iOS，而不适用于Android！如果以上方法在Android上可行，则可以通过Platform模块使用条件解决方案：Platform.OS === 'ios' ? ... : ...。

<View style={{ overflow: 'hidden'}}>
    <View style={{ borderStyle: 'dashed', borderWidth: 1, borderColor: 'red', margin: -2, marginTop: 0}} />
</View>

技巧在于使用父元素的overflow: hidden，然后设置borderWidth: 1，同时还要设置负边距margin: -2。我们将顶部的边距重置为零。这样就可以假装有一个虚线顶部边框了。

这里是一个带有子视图的示例，以及它在iOS上的外观。

<SafeAreaView style={{ margin: 20 }}>
   <View style={{ overflow: 'hidden' }}>
     <View
       style={{
         borderStyle: 'dashed',
         borderWidth: 1,
         borderColor: 'red',
         margin: -2,
         marginTop: 10,
       }}>
       <View style={{ height: 200, width: 200 }} />
     </View>
   </View>
</SafeAreaView>

- David Scholz

---

这是一个很好的解决方案！我之前没有意识到在iOS上，虚线样式确实可以在borderWidth上使用，只是不能在borderTopWidth上使用。我需要在顶部边框上添加填充，所以最终采用了你的解决方案的变体，如下所示：将marginHorizontal添加到父组件中，然后在具有边框的组件下面再添加另一个组件。非常感谢你的帮助！ - Shep Sims

Answer 2

这是我做事的方式 :)

dottedLineContainer: {
  flex: 1,
  flexDirection: 'row',
  justifyContent: 'center',
  alignItems: 'center',
  overflow: 'hidden',
  marginLeft: 5,
  marginRight: 5,
},
dottedLineDot: {
  width: 2,
  height: 2,
  backgroundColor: 'grey',
  borderRadius: 100,
  marginLeft: 2,
},

const dottedLineDots = Array.from({length: 100}, (_, index) => (
   <View key={index} style={styles.dottedLineDot}></View>
));

<View style={styles.dottedLineContainer}>{dottedLineDots}</View>

- BennKingy

Answer 3

这是我的处理方式：

     <View style={{overflow: 'hidden'}}>
        <View
          style={{
            borderStyle: 'dashed',
            borderWidth: 1,
            borderColor: '#000',
            margin: -1,
            height: 0,
            marginBottom: 0,
          }}>
          <View style={{width: 60}}></View>
        </View>
      </View>

- Turjoy Saha

Answer 4

它不起作用是因为您设置了 borderTopWidth 而不是 borderWidth。如果您想要虚线，我认为有两个选项： 1- 使用像 react-native-dash 这样的库 2- 使用此解决方案 =>

<View style={{ height: 1, width: '100%', borderRadius: 1, borderWidth: 1, borderColor: 'red', borderStyle: 'dashed' }} />

- MehdiNasiriPoor

---

这个不起作用。正确的方法是设置 height: 1，这会使它看起来像顶部边框，但实际上是底部和顶部挤在一起。你可以看到两个水平短线重叠。如果这个视图有子元素，它们将不可见。 - David Scholz