React Native之虛線dashed屬性在Android機不相容問題解決
阿新 • • 發佈:2019-02-16
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>