#3 ReactART初步使用

import React, { Component } from 'react';
import {
  StyleSheet,
  View,
  ART
} from 'react-native';

class Circle extends Component {
  render() {
    const { radius, ...rest } = this.props;

    const circle = ART.Path()
                      .move(radius, 0)
                      .arc(0, radius * 2, radius)
                      .arc(0, radius * -2, radius)

    return <ART.Shape {...rest} d={circle} />;
  }
}
export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <ART.Surface width={200} height={200}>
          <ART.Group x={0} y={0}>
            <Circle radius={100} fill='#f2f' />
          </ART.Group>
        </ART.Surface>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
});

第一印象，ReactART 就是SVG, canvas的结合体。其中：

• Surface 就是 <canvas /> 元素， 提供绘制的平面
• Path 就是 svg中的路径，其方法则是canvas中的一系列绘制操作

art draw circle.png

上面的例子可以将各个组件从 ART 中提取出来：

import React, { Component } from 'react';
import {
  StyleSheet,
  View,
  ART
} from 'react-native';

const { Path, Surface, Group, Shape } = ART;

class Circle extends Component {
  render() {
    const { radius, ...rest } = this.props;

    const circle = Path()
                      .move(radius, 0)
                      .arc(0, radius * 2, radius)
                      .arc(0, radius * -2, radius)

    return <Shape {...rest} d={circle} />;
  }
}
export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Surface width={200} height={200}>
          <Group x={0} y={0}>
            <Circle radius={100} fill='#f2f' />
          </Group>
        </Surface>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
});