如何在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)'
}

代码可以正常运行，但是四周都有边框。我该如何在一个方向上添加虚线边框？同时，是否有方法可以增加虚线之间的间距？

"react-native": "0.57.7"

- Subhendu Kundu

---

能把虚线改成点线吗？ - letsCode

注意：截至撰写本文，将 borderStyle 应用于单个边框在 React Native 0.63.2 中存在问题，但有一个开放的 PR 来解决这个限制：https://github.com/facebook/react-native/pull/29099 - Joshua Pinter

Answer 1

非常感谢，你们太棒了。虽然我正在使用react-native，但它不使用px/em单位。我明白了这个想法。我之前也考虑过这个想法，这是我之前的一种解决方法，但唯一的问题是边框宽度变得太粗了，而且破折号之间的间隙变小了。所以我决定使用react-native-dash 来解决它。

- Subhendu Kundu

Answer 2

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以获取虚线边框。

- OriHero

---

您发布的问题已经过时，而且 Facebook 已经在近一年前解决了它。 - fedesc

好的，我在查看我的代码问题时添加了 borderRadius: 1。但仍然不确定为什么它没有起作用。 :( - Subhendu Kundu

目前在React Native中还无法实现单侧虚线边框。您可以尝试使用这个。 - OriHero

注意：截至撰写本文，将 borderStyle 应用于单个边框在 React Native 0.63.2 中存在问题，但有一个开放的 PR 来解决这个限制：https://github.com/facebook/react-native/pull/29099 - Joshua Pinter

Answer 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

- fedesc

---

不知道这个。明天我会试一下。 - OriHero

是的，这很准确，只需使用CSS就可以了。 - Tyler Wright

非常感谢，你们太棒了。虽然我正在使用react-native，但它不使用px/em。我明白了这个想法。我之前也考虑过这个想法，那就是我一段时间以前做的解决方法，唯一的问题是边框宽度变得太厚了，破折号之间的间隙也变小了。所以我决定用https://github.com/obipawan/react-native-dash来解决这个问题。 - Subhendu Kundu

这个问题是关于 react-native 而不是 CSS。 - OriHero

注意：截至撰写本文，将borderStyle应用于单个边框的React Native 0.63.2存在问题，但有一个开放的PR以修复此限制：https://github.com/facebook/react-native/pull/29099 - Joshua Pinter