React Native刚开始做,没有虚线控件,也没有Android中xml画虚线方便,可以用下面办法来实现。
实现思路:
1.拿到一个宽度width,求出虚线长度len
2.生成一个数组arr,(后面会根据数组元素画n个view,组合成虚线)
3.生成虚线
import React from 'react';
import {
Text,View,StyleSheet,Dimensions,} from 'react-native';
const screenWidth = Dimensions.get('window').width;
export default class DashLine extends Component{
render(){
var len = Math.ceil(screenWidth/4);
var arr = [];
for(let i=0; i<len; i++){
arr.push(i);
}
return <View style={styles.dashLine}>
{
arr.map((item,index)=>{
return <Text style={styles.dashItem} key={'dash'+index}> </Text>
})
}
</View>
const styles = StyleSheet.create({
dashLine: {
flexDirection: 'row',},dashItem: {
height: 1,width: 2,marginRight: 2,flex: 1,backgroundColor: '#ddd',}
})
这里是水平方向的虚线 ,要是垂直方向的虚线,只需要修改下 dashLine,dashItem的样式
const styles = StyleSheet.create({
dashLine: {
flexDirection: 'column',dashItem: {
height: 2,width: 1,}
})
const screenWidth = Dimensions.get(‘window’).width;修改为:
const screenHeight = Dimensions.get('window').height;
虚线就定义好了
使用:
<View style={{ overflow: 'hidden',backgroundColor: '#999',margin: 10}}><DashLine/></View>