如何在react-native中添加破折号或虚线边框？

Question

我想在一侧添加虚线边框，

{
  height: '100%',
  width: 20,
  position: 'absolute',
  borderRadius : 1,
  borderStyle: 'dashed',
  borderRightWidth: 1,
  borderRightColor: 'rgba(161,155,183,1)'
}

这不起作用，但是当我将其更改为

{
  height: '100%',
  width: 20,
  position: 'absolute',
  borderRadius : 1,
  borderStyle: 'dashed',
  borderWidth: 1,
  borderColor: 'rgba(161,155,183,1)'
}

可以工作，但边界在 4 边。如何仅在一侧添加边框？还有没有办法增加破折号的间距？ "react-native": "0.57.7"

Answer 1

https://github.com/facebook/react-native/issues/7838

根据查看代码，这看起来像是有意的限制。如果尝试使用虚线或点线边框，有一些代码会专门检查所有边的颜色和宽度是否相同。我大胆猜测，如果您将 borderWidth 设置为 1 而不仅仅是 borderBottomWidth，则警告将消失并且边框将显示。

您可以通过使用这种掩码来实现这一点：

const inputStyles = 
StyleSheet.create({
container: {
height: 20,
marginRight: 25,
marginLeft: 25,
paddingTop: 25,
paddingBottom: 25,
borderStyle: 'dotted',
borderWidth: 2,
borderColor: '#b7c2c6',
position: 'relative',
overflow: 'hidden',
},
topMask: {
height: 3,
width: 9999,
backgroundColor: 'white',
position: 'absolute',
top: -3,
left: 0,
},
rightMask: {
height: 9999,
width: 3,
backgroundColor: 'white',
position: 'absolute',
top: 0,
right: -3,
},
leftMask: {
height: 9999,
width: 3,
backgroundColor: 'white',
position: 'absolute',
top: 0,
left: -3,
},
});

这个问题还没有解决：https ://github.com/facebook/react-native/issues/17251

您可以设置borderRadius为 1 或 0.5 以获得虚线边框。