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

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

应为：

<svg viewBox="100 50 250 250">
<defs> 
<filter id="drop-shadow-path-line" filterUnits ="userSpaceOnUse" >
<feGaussianBlur result="blurOut" in="SourceAlpha" stdDeviation="3"  />
<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
</filter>
</defs>
<g>  
    <path d="M136.8595428466797 123.9515609741211 C 181.78643913269042 123.9515609741211 158.49101142883302 131.44540405273438 203.41790771484375 131.44540405273438" sclass="active" ></path>

    <path d="M136.8595428466797 123.9515609741211 C 179.60736618041992 123.9515609741211 157.44182815551758 124.271484375 200.1896514892578 124.271484375"   class="active" ></path>

    <path d="M136.8595428466797 123.9515609741211 C 176.21768913269042 123.9515609741211 155.809761428833 53.60844039916992 195.16790771484375 53.60844039916992"  class="active" ></path>
    
    <path d="M136.8595428466797 123.9515609741211 C 181.30219955444335 123.9515609741211 158.25785903930665 119.24974060058594 202.7005157470703 119.24974060058594"  class="active" ></path>
  
  
  <path d="M136.8595428466797 123.9515609741211 C 181.30219955444335 123.9515609741211 158.25785903930665 102.39105224609375 202.7005157470703 102.39105224609375"  class="active" ></path>
  
  
  <path d="M133.2725830078125 154.7993927001953 C 181.83128128051757 154.7993927001953 156.6526969909668 170.1845245361328 205.21139526367188 170.1845245361328" class="active" ></path>

  </g>

</svg>

仅更改一个边框而不更改整个div就像声明它一样简单 { 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)' }或borderBottomStyle: 'dashed'，borderTopStyle，borderRightStyle

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，以获得虚线框。

Answer 3

非常感谢你们，你们真了不起。尽管我使用的是react-native，但它不使用px / em。我知道了我也想到了这个主意。那就是我前一段时间做的解决方法，这种方法的唯一问题是边框宽度变得太粗。破折号之间的距离也变小了。所以我决定用react-native-dash

修复它

如何在本机中添加破折号或虚线边框？

3 个答案: