React|React Native加虚线 ReactNative加虚线

介绍两种加虚线的方法 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-->虚线个数

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

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

文章图片
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 ( ); };

【React|React Native加虚线】使用:color:线条颜色，默认"black",backgroundColor:'white',lineWidth:线条粗细,默认1,style:组件样式。