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 
            {
                arr.map((item, index) => {
                    return  
                })
            }
        
    }
}
const styles = StyleSheet.create({
    dashLine: {
        flexDirection: 'row',
    },
    dashItem: {
        height: 1,
        width: 2,
        marginRight: 2,
        flex: 1,
    }
})

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

[email protected]

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

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 
            {
                arr.map((item, index) => {
                    return  
                })
            }
        
    }
}
const styles = StyleSheet.create({
    dashLine: {
        flexDirection: 'column',
    },
    dashItem: {
        height: 2,
        width: 1,
        marginTop: 2,
        flex: 1,
    }
})

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

[email protected]

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 (
    
      
      
    
  );
};

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

[email protected]