android - 如何在 react-native 中添加破折号或虚线边框?
问题描述
我想在一侧添加虚线边框,
{
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"
解决方案
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 以获得虚线边框。
推荐阅读
- excel - 在 Excel 中的系列区域内选择数据
- postgresql - Postgres:SQL 错误 [42846]:错误:无法将 bigint 类型转换为日期
- javascript - 是否有 node.js 默认凭据提供程序链?
- python - 后续如何调用python函数调用
- java - 错误 ORA-01858。Java 以不同的语言抛出错误消息
- docusignapi - 如何替换/PUT 文档模板中的选项卡
- java - 如何用箭头键移动圆圈?
- javascript - 在另一个函数内更改 settimeout 内的变量
- python - 如何传递参数(元组) - 不同的长度
- javascript - Firestore 使用 2 次读取来添加带有时间戳的文档