以虚线样式响应本机顶部和底部边框

Question

我正在尝试仅使用“虚线”样式为顶部和底部视图应用边框。但 borderStyle 不适用于 borderTopWidth 和 borderBottomWidth。这是工作，

<View
  style={{
    backgroundColor: 'white',
    borderRadius: 10,
    marginHorizontal: 20,
    padding: 16,
    borderStyle: 'dashed',
    borderColor: 'red',
    borderWidth: 1
  }}>{...content...}</View>

这是行不通的，

<View
  style={{
    backgroundColor: 'white',
    borderRadius: 10,
    marginHorizontal: 20,
    padding: 16,
    borderStyle: 'dashed',
    borderBottomColor: 'red',
    borderBottomWidth: 1,
    borderTopColor: 'red',
    borderTopWidth: 1,
  }}>{...content...}</View>

有什么不同的方法来实现这种风格吗？

Answer 1

不是一个精确的解决方案，但这个黑客有效（例如 - 添加底部边框）

<View style={{ overflow: 'hidden' }}>
  <View style={{ borderStyle: 'dashed', borderWidth: 1, borderColor: '#000', margin: -2, marginBottom: 0 }}>
    <Text>Some Data to be underlined</Text>
  </View>
</View>

基本上我们正在做的是：

1. 定义一个隐藏溢出部分（数据、项目等）的外部容器。
2. 对于内部容器，我们设置其边距以超出外部容器尺寸