borderStyle:"dashed" 在安卓机上无效果。iOS中可以正常显示虚线;但是安卓只能显示为实线。
我的解决办法:
lineOne:{
width:25,
height:0,
borderWidth:0.8,
borderColor:'red',
borderStyle:'dashed',
borderRadius:0.1,
}
解决点:
1. height设置为0, borderWidth设置为1(宽细自己考虑)
2. borderStyle设置为dashed
3.borderRadius设置成1和0.5;(我设置成了0.1真机Android调试最满意)
另外,附上最近github上各位老铁们的讨论:
borderStyle ‘dashed’ didn’t work when borderBottomWidth set #12817
=====================================================================================
更新,有更好的解决方法啦,我们老大提供的。很多时候,开发的思想真的很重要,换一种思路就会有新的天地:
思路:将虚线改成一个宽度为2,高度为1的view; 虚线就是5个这样的view,就能看出来是一条虚线了。
源码供上:
import React, {Component} from 'react';
import {
Text,
View,
StyleSheet,
} from 'react-native';
/*水平方向的虚线
* len 虚线个数
* width 总长度
* backgroundColor 背景颜色
* */
export default class DashLine extends Component {
render() {
var len = this.props.len;
var arr = [];
for (let i = 0; i < len; i++) {
arr.push(i);
}
return <View style={[styles.dashLine, {width: this.props.width}]}>
{
arr.map((item, index) => {
return <Text style={[styles.dashItem, {backgroundColor: this.props.backgroundColor}]}
key={'dash' + index}> </Text>
})
}
</View>
}
}
const styles = StyleSheet.create({
dashLine: {
flexDirection: 'row',
},
dashItem: {
height: 1,
width: 2,
marginRight: 2,
flex: 1,
}
})
用法:
<CMDashLine backgroundColor={Color.CM_QuotaTextColor} len={6} width={45}></CMDashLine>