醉临武-临武县第一中学官网

react native 绘制虚线或边框de详细教程

在react native中想要绘制虚线边框的话,可以用简单的样式来完成:

QQ截图20171016170201.png

这里用到了边框样式:

borderStyle enum('solid', 'dotted', 'dashed')

borderStyle: 'dashed',borderColor:'red',borderWidth:2,

borderRadius:10,

width:width-40,

height:200,


borderStyle: 'dashed',属性需要搭配borderRadius来一起使用,才会有虚线的效果,不然是没有任何作用的。

还有就是这种方法不适用于绘制四边中的任意一边,如果单独绘制左边虚线边框的话,

亲测是没有任何效果的,那么该怎么解决这个问题呢,下面我们就来一起使用ART来绘制虚线吧。

ART基础组件

ART暴露的组件共有7个,本文介绍常用的四个组件:表面,集团,形状,文字。

  • 表面 - 一个矩形可呈染的区域,是其他元素的容器

  • 组 - 可容纳多个形状,文本和其他的分组

  • 形状定义,可填充

  • 文本 - 文本形状定义

属性

表面

  • width:呈染区域的宽

  • 身高:定义渲染区域的高

形状

  • d:定义绘制路径

  • stroke:描边颜色

  • strokeWidth:描边宽度

  • strokeDash:定义虚线

  • 填充:填充颜色

文本

  • funt:字体样式,定义字体,大小,是否加粗如:bold 35px Heiti SC

路径

  • moveTo(x,y):移动到坐标(x,y)

  • lineTo(x,y):连线到(x,y)

  • arc():绘制弧线

  • close():封闭空间

代码示例

绘制直线

这里写图片描述

import React from 'react'

import {

View,

ART

} from 'react-native'


export default class Line extends React.Component{


render(){


const path = ART.Path();

path.moveTo(1,1); //将起始点移动到(1,1) 默认(0,0)

path.lineTo(300,1); //连线到目标点(300,1)


return(

<View style={this.props.style}>

<ART.Surface width={300} height={2}>

<ART.Shape d={path} stroke="#000000" strokeWidth={1} />

</ART.Surface>

</View>

)

}

}


绘制虚线

了解strokeDash的参数,
[10,5]:表示绘10像素实线在绘5像素空白,如此循环


[10,5,20,5]:表示绘10像素实线

在绘制5像素空白

在绘20像素实线及5像素空白


QQ截图20171016170216.png


代码示例:

import React from 'react'

import {

View,

ART

} from 'react-native'


const {Surface, Shape, Path} = ART;


export default class DashLine extends React.Component{


render(){


const path = Path()

.moveTo(1,1)

.lineTo(1,300);


return(

<View style={this.props.style}>

<View style={{marginLeft:40}}>

<Surface width={2} height={300}>

<Shape d={path} stroke="red" strokeWidth={2} strokeDash={[10,5]}/>

</Surface>

</View>

</View>

)

}

}