React Native 画虚线 DashLine

React Native刚开始做，没有虚线控件，也没有Android中xml画虚线方便，可以用下面办法来实现。

实现思路：
1.拿到一个宽度width，求出虚线长度len
2.生成一个数组arr，（后面会根据数组元素画n个view，组合成虚线）
3.生成虚线

import React from 'react';
import {
    Text,View,StyleSheet,Dimensions,} from 'react-native';
@H_502_13@const screenWidth = Dimensions.get('window').width;

export @H_502_13@default @H_502_13@class @H_301_22@DashLine @H_502_13@extends @H_301_22@Component{
    render(){
        @H_502_13@var len = Math.ceil(screenWidth/4);
        @H_502_13@var arr = [];
        @H_502_13@for(let i=0; i<len; i++){
            arr.push(i);
        }

        @H_502_13@return <View style={styles.dashLine}>
            {
                arr.map((item,index)=>{
                    @H_502_13@return <Text style={styles.dashItem} key={'dash'+index}> </Text>
                })
            }
        </View>
    @H_502_13@const styles = StyleSheet.create({
    dashLine: {
        flexDirection: 'row',},dashItem: {
        height: 1,width: 2,marginRight: 2,flex: 1,backgroundColor: '#ddd',}
})

这里是水平方向的虚线，要是垂直方向的虚线，只需要修改下 dashLine，dashItem的样式

@H_502_13@const styles = StyleSheet.create({
    dashLine: {
        flexDirection: 'column',dashItem: {
        height: 2,width: 1,}
})

const screenWidth = Dimensions.get(‘window’).width;修改为：

@H_502_13@const screenHeight = Dimensions.@H_502_13@get('window').height;

虚线就定义好了

使用：

 <@H_301_22@View style={{ overflow: 'hidden',backgroundColor: '#999',margin: 10}}><@H_301_22@DashLine/></@H_301_22@View>

React Native 画虚线 DashLine

猜你在找的React相关文章