尝试添加虚线边框样式时，获取“不支持的虚线/点线边框样式”仅限 iOS答案

【问题标题】：When trying to add a dashed border style, getting "Unsupported dashed / dotted border style" iOS ONLY尝试添加虚线边框样式时，获取“不支持的虚线/点线边框样式”仅限 iOS
【发布时间】：2023-01-12 21:19:21
【问题描述】：

这是我的视图样式

<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

并且包含视图的其余部分根本没有呈现

【问题讨论】：

我可以重现这个。有趣的是，当某些样式属性被删除并重新添加时，它开始随机工作，但并不可靠。 GitHub here、here 和here 上也有类似的问题，但主要针对 Android。对我来说似乎是一个错误，但我不确定。

标签： css react-native styling

【解决方案1】：

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

由于它适用于 Android 但不适用于 iOS，我们可以利用 overflow: hidden 的用法。这不适用于 Android。这仅适用于 iOS！如果以上内容适用于 Android，那么您可以通过Platform module: 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>

【讨论】：

这是一个很好的解决方案！我没有意识到虚线样式确实适用于 borderWidth，但不适用于 iOS 上的 borderTopWidth。我也需要在顶部边框上进行填充，因此最终使用了您的解决方案的变体，如此处所示，通过将 marginHorizontal 添加到父级上然后在带有边框的组件下方制作另一个组件来完成它。非常感谢你的帮助！

【解决方案2】：

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

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

【讨论】：

这是行不通的。正确您正在设置一个 height: 1，这使它看起来像一个顶部边框，但这实际上是底部和顶部挤压在一起。您可以看到两条水平破折号重叠。如果这个视图有孩子，他们将不可见。

【解决方案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>

【讨论】：