论坛 › 知识问答 › android - 如何在 react-native 中添加破折号或虚线边框？

菜鸟教程小白 发表于 2022-12-11 22:09:17

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

                                            <p><p>我想在一侧添加虚线边框，</p>

<pre><code>{
height: &#39;100%&#39;,
width: 20,
position: &#39;absolute&#39;,
borderRadius : 1,
borderStyle: &#39;dashed&#39;,
borderRightWidth: 1,
borderRightColor: &#39;rgba(161,155,183,1)&#39;
}
</code></pre>

<p>这不起作用，但是当我将其更改为</p>

<pre><code>{
height: &#39;100%&#39;,
width: 20,
position: &#39;absolute&#39;,
borderRadius : 1,
borderStyle: &#39;dashed&#39;,
borderWidth: 1,
borderColor: &#39;rgba(161,155,183,1)&#39;
}
</code></pre>

<p>工作，但在 4 边边框。
如何在一侧添加 bashed 边框？
还有一种方法可以为破折号添加更多间距吗？
<code>"react-native": "0.57.7"</code></p></p>
                                    <br><hr><h1><strong>Best Answer-推荐答案</ strong></h1><br>
                                            <p><p> <a href="https://github.com/facebook/react-native/issues/7838" rel="noreferrer noopener nofollow">https://github.com/facebook/react-native/issues/7838</a> </p>

<p>根据查看代码，这看起来像是一个故意的限制。如果尝试使用虚线或虚线边框，有代码专门检查颜色和宽度是否在所有方面都相同。我冒昧地猜测，如果您将borderWidth 设置为1 而不仅仅是borderBottomWidth，警告将会消失并且您的边框将会显示。</p>

<p>您可以通过使用这种掩码来实现:</p>

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

<p>此问题尚未解决:<a href="https://github.com/facebook/react-native/issues/17251" rel="noreferrer noopener nofollow">https://github.com/facebook/react-native/issues/17251</a> </p>

<p>您可以将 <code>borderRadius</code> 设置为 1 或 0.5 以获得虚线边框。</p></p>
                                   
                                                <p style="font-size: 20px;">关于android - 如何在 react-native 中添加破折号或虚线边框？，我们在Stack Overflow上找到一个类似的问题：
                                                        <a href="https://stackoverflow.com/questions/54694110/" rel="noreferrer noopener nofollow" style="color: red;">
                                                                https://stackoverflow.com/questions/54694110/
                                                        </a>
                                                </p>
                                       

查看完整版本: android - 如何在 react-native 中添加破折号或虚线边框？