尝试添加虚线边框样式时，仅出现“不支持虚线/点线边框样式”iOS

Question

这是我的视图样式

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

在 Android 上，我得到一条漂亮的虚线

然而，在 iOS 上，我没有收到任何消息

和

WARN Unsuppported dashed / dotted border style

并且包含视图的其余部分根本不渲染

Answer 1

我已经在评论中提到，我不知道为什么会失败，在我看来这就像一个错误。GitHub 上也有类似的问题 GitHub这里、这里和这里。

由于它可以在 Android 上运行，但不能在 iOS 上运行，因此我们可以利用overflow: hidden. 这在 Android 上不起作用。这仅适用于 iOS！如果上述内容在 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>