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

【问题标题】：How to add dash or dashed border in react-native?如何在 react-native 中添加破折号或虚线边框？
【发布时间】：2019-02-14 15:41:48
【问题描述】：

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

{
  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 边边框。如何在一侧添加 bashed 边框？还有一种方法可以为破折号添加更多间距吗？ "react-native": "0.57.7"

【问题讨论】：

你能把虚线改成虚线吗
注意：在撰写本文时，将 borderStyle 应用于单个边框边缘在 React Native 0.63.2 中已损坏，但有一个开放的 PR 可以解决此限制：github.com/facebook/react-native/pull/29099

标签： android ios reactjs react-native

【解决方案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 以获得虚线边框。

【讨论】：

您发布的问题是老问题，Facebook 大约一年前解决了。
好吧，我确实在我的代码中添加了borderRadius: 1 来查看该问题（在我的问题中添加）。仍然不确定为什么这不起作用。 :(
你还不能在 react native 中获得一侧虚线边框。你现在可以试试this。
注意：在撰写本文时，将 borderStyle 应用于单个边框边缘在 React Native 0.63.2 中被破坏，但有一个开放的 PR 来解决此限制：github.com/facebook/react-native/pull/29099

【解决方案2】：

非常感谢你们，你们太棒了。虽然我使用的是 react-native，但它不使用 px/em。我明白了。我也确实想过这个想法。这就是我不久前所做的解决方法，这种方法的唯一问题是边框宽度变得太厚。破折号之间的差距也变小了。所以我决定用react-native-dash修复它

【讨论】：

【解决方案3】：

我不确定它是否只是用于粘贴，但您发布的内容中有很多语法错误

应该是：

{
  height: '100%',
  -width: 20, - width: 1px/em/
  position: 'absolute',
  -borderRadius : 1-, borderRaduis : 1px/em/... or any other size
  borderStyle: 'dashed',
  -borderWidth: 1-, borderWidth: 1px/em/...
  borderColor: 'rgba(161,155,183,1)'
}

只改变一个边框而不是整个 div 很简单 borderBottomStyle: 'dashed' 或 borderTopStyle,borderRightStyle,borderLeftStyle

【讨论】：

不知道。我明天试试看。
是的，这很准确，只需使用 CSS。
非常感谢你们，你们太棒了。虽然我使用的是 react-native，但它不使用 px/em。我明白了。我也确实想过这个想法。这就是我不久前所做的解决方法，这种方法的唯一问题是边框宽度变得太厚。破折号之间的差距也变小了。所以我决定用github.com/obipawan/react-native-dash修复它
问题是关于react-native而不是css
注意：在撰写本文时，将 borderStyle 应用于单个边框边缘在 React Native 0.63.2 中被破坏，但有一个开放的 PR 来解决此限制：github.com/facebook/react-native/pull/29099