React Native之虚线dashed属性在Android机不兼容问题解决

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/SpicyBoiledFish/article/details/79628885

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>