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

雨点打透心脏的1/2处 2022-03-15 02:54 257阅读 0赞

*  引入

import \{ ART \} from 'react-native';

*  环境配置

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

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

nodule\_modules / react-native / Libraries / ART / ART.xcodeproj

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70][]

将 libART.a 添加到 Linked Frameworks and Libraries

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 1][]    ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 2][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 3][]

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

*  基础组件

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():封闭空间

*  实际应用

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 4][]

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70]: /images/20220315/400aa7923d4346abb28761ac51f3379a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20190228163818907.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 2]: /images/20220315/5e2476689f9c48c2a4ad7269492c2574.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 3]: /images/20220315/d6f90bfdebd14a62aefa421a58ba52e5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 4]: /images/20220315/e8f594fe29d6431eb6b8fa534966391e.png