React Native加虚线

介绍两种加虚线的方法

1.组件方法:

import React, {Component} from 'react';
import {
    Text,
    View,
    StyleSheet,
} from 'react-native';
 
/*水平方向的虚线
 * len 虚线个数
 * width 总长度
 * backgroundColor 背景颜色
 * */
export default class DashSecondLine 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,
    }
})

使用: backgroundColor-->虚线颜色，width-->虚线宽度， len-->虚线个数

<DashSecondLine backgroundColor='blue' len={6} width={45}></DashSecondLine>

WX20181014-195026@2x.png

竖直方向虚线:组件内部修改。

import React, {Component} from 'react';
import {
    Text,
    View,
    StyleSheet,
} from 'react-native';
 
/*水平方向的虚线
 * len 虚线个数
 * width 总长度
 * backgroundColor 背景颜色
 * */
export default class DashSecondLine 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, {height: 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: 'column',
    },
    dashItem: {
        height: 2,
        width: 1,
        marginTop: 2,
        flex: 1,
    }
})

使用: backgroundColor-->虚线颜色，width-->虚线宽度， len-->虚线个数

<DashSecondLine backgroundColor='blue' len={6} width={45}></DashSecondLine>

WX20181014-195351@2x.png

2.组件方法

'use strict';
import React from 'react';
import {View} from 'react-native';

/**
 * 虚线组件
 * @param {String} color 线条颜色
 * @param {String} backgroundColor 背景颜色
 * @param {Number} lineWidth 线条粗细
 * @param {Object} style 组件样式
 * @returns {Component}
 */
export default ({color = 'black', backgroundColor = 'white', lineWidth, style = {}}) => {
  let wrapperStyle = {
    height: lineWidth,
    overflow: 'hidden'
  };
  let lineStyle = {
    height: 0,
    borderColor: color,
    borderWidth: lineWidth,
    borderStyle: 'dashed'
  };
  let lineMask = {
    marginTop: -lineWidth,
    height: lineWidth,
    backgroundColor: backgroundColor
  };

  return (
    <View style={[wrapperStyle, style]}>
      <View style={lineStyle} />
      <View style={lineMask} />
    </View>
  );
};

使用:color:线条颜色，默认"black",backgroundColor:'white',lineWidth:线条粗细,默认1,style:组件样式。

       <View style={{ flexDirection: 'row' }}>
          <DashLine style={{flex:1, margin: 5 }} lineWidth={2} />
        </View>

WX20181014-201941@2x.png