react-native-art环境配置及使用

引入

import { ART } from 'react-native';

环境配置

Android默认就包含ART库，IOS需要单独添加依赖库。

右键点击项目 -> ‘Add Files to ProjectName -> 选择

nodule_modules / react-native / Libraries / ART / ART.xcodeproj

react-native-art环境配置及使用

将 libART.a 添加到 Linked Frameworks and Libraries

react-native-art环境配置及使用

报错：No component found for view with name “ARTShape”

react-native-art环境配置及使用

不知道为什么，第二天重启电脑，这个问题就没了。

基础组件

1.Surface:一个矩形可渲染的区域，是其他元素的容器

width:渲染区域的宽

height:定义渲染区域的高

2.Group:可容纳多个形状、文本和其他的分组

3.Shape:形状定义，可填充

d:定义绘制路径

stroke:描边颜色

strokeWidth:描边宽度

strokeDash:定义虚线

fill:填充颜色

4.Text:文本形状定义

funt:字体样式，定义字体、大小、粗细等，如bold 35px Heiti SC

5.Path

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

lineTo(x,y):连线到坐标(x,y)

arc():绘制弧线

close():封闭空间

实际应用

react-native-art环境配置及使用

import React, { Component } from 'react';
import { View, ART, StyleSheet } from 'react-native';
const { Surface, Shape, Path, Group, Text } = ART;
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  }
});
class Tabnavigation2 extends Component {
  static navigationOptions = {
    headerTitle: "发现"
  };
  render() {
    const linePath = Path().moveTo(1, 1).lineTo(300, 1);
    const juxingPath = new Path().moveTo(1, 1).lineTo(1, 99).lineTo(99, 99).lineTo(99, 1).close();
    const textPath = new Path().moveTo(40, 40).lineTo(99, 10)
    return (
      <View style={styles.container}>
        {/* <Text>绘制直线、虚线、矩形、文本，此处如果有Text，会与下方Text报错重复定义</Text> */}
        <Surface width={300} height={2} style={{ marginTop: 20 }}>
          <Shape d={linePath} stroke='#000000' strokeWidth={2} />
        </Surface>
        <Surface width={300} height={2} style={{ marginTop: 20 }}>
          <Shape d={linePath} stroke='#000000' strokeWidth={2} strokeDash={[10, 5]} />
        </Surface>
        <Surface width={100} height={100} style={{ marginTop: 20 }}>
          <Shape d={juxingPath} stroke='#000000' strokeWidth={1} fill='#892265' />
        </Surface>
        <Surface width={100} height={100} style={{ marginTop: 20 }}>
          <Text stroke='#000000' strokeWidth={1} font='bold 35px Heiti SC'
            path={textPath} >Text</Text>
        </Surface>
        <Surface width={100} height={100}>
          <Group>
            <Shape d={juxingPath} stroke="#FFFFFF" fill="#eee" strokeWidth={1} />
            <Text strokeWidth={1} strokeDash={[2, 1, 2, 1]} stroke="#000" font="bold 30px Heiti SC" path={textPath} >Group</Text>
          </Group>
        </Surface>
      </View>
    );
  }
}
export default Tabnavigation2

react-native-art环境配置及使用

相关推荐