1. 程式人生 > >React Native之虛線dashed屬性在Android機不相容問題解決

React Native之虛線dashed屬性在Android機不相容問題解決

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上各位老鐵們的討論:

=====================================================================================

更新,有更好的解決方法啦,我們老大提供的。很多時候,開發的思想真的很重要,換一種思路就會有新的天地:

思路:將虛線改成一個寬度為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>