React-Native中非常贱的画虚线的方式

版权声明：本文为博主原创文章，若需转载，请注明出处 https://blog.csdn.net/suwu150/article/details/83278588

React-Native中非常贱的画虚线的方式

在使用react-native中的时候,使用css画虚线的时候,警告提示不支持,提示信息如下所示:

然后在网上淘了一番,结果发现这种写法官方提供了这一个属性,但是使用时有很多限制,比如使用时必须的配合borderRadius进行使用,而且画出的虚线也不是很好看,用来画虚线框效果挺好的,下面是官方的使用方式:

<View style={{
borderColor: '#000',
borderRadius: 0.5,
height: 5,
borderWidth: 1,
borderStyle: 'dotted' }} />

再来看看官方issue官方虚线使用
不满意官方产生的效果,我就使用了下面这种方式,如下面代码所示:

export const renderDotted = () => {
const width = styleDict.windowW / 2;
const dottes = [];
for (let i = 0; i < width; i++) {
dottes.push(i);
}
return (
<View style={{ flexDirection: 'row', width: styleDict.windowW - 35, justifyContent: 'center', overflow: 'hidden' }}>
{
dottes.map(() => {
return <Text style={{ color: '#999693', fontSize: 10 }}>-</Text>;
})
}
</View>
);
};

效果如下所示:

注意:这只是一种实现方法,多查官方资料学习,使用art库代价太大了