そーす

福岡在住のプログラマ

React Native ARTで遊ぶ

React Nativeでグラフを描くにはどうしたらいいのかと調べましたら、

React Native内にReact Native ARTというライブラリが在るのを知りました。

ドキュメントにも書いてないですが、開発はされているようです。

react-native/ReactNativeART.js at 0.48-stable · facebook/react-native · GitHub

Install

初期でiOSはライブラリの設定がされていないのでそれを行う必要があります。(RN47.0 現在)

Xcodeでプロジェクトを開き、

  1. Build Phases -> Link Binary with Libraries -> + (Add items) -> Add Other -> /node_modules/react-native/Libraries/ART/ART.xcodeproj

  2. Build Phases -> Link Binary with Libraries -> libART.a

で追加します。

これで完了です。Androidは最初から動きます

直線を描く

import React, { Component } from 'react';
import {
  AppRegistry,
  ART,
  Dimensions
} from 'react-native';

const {
  ClippingRectangle,
  Group,
  Surface,
  LinearGradient,
  Path,
  RadialGradient,
  Shape,
  Transform,
  Text
} = ART;

export default class ArtSample extends Component {
  render() {
    const { width, height } = Dimensions.get('window');
    const path = Path();
    path.moveTo(width / 2, height / 2);
    path.line(0, -100);

    return (
      <Surface width={width} height={height} >
        <Shape d={path} stroke="#AAA" strokeWidth="4" />
        <Shape d={`m${width / 2},${height / 2} v100`} stroke="#333333" strokeWidth="8" />
        <Text x={width / 2 + 30} y={height / 2} stroke="#444" strokeWidth="1">ポッキーだよ</Text>
      </Surface>
    );
  }
}

f:id:saburesan:20170831144354p:plain

ポッキーを描きました。

svgに慣れてるのであればあまり難しくなさそうですね。(pathじゃなくてShapeだけど)

ベジエ

2次ベジエ、3次ベジエ。

return (
      <Surface width={width} height={height} >
        <Shape d={path} stroke="#AAA" strokeWidth="4" />
        <Shape d={`m${width / 2},${height / 2} v100`} stroke="#333333" strokeWidth="8" />
        <Text x={width / 2 + 30} y={height / 2} stroke="#444" strokeWidth="1" font="bold 20px Futura">ポッキーだよ</Text>
        <Shape d={`m0,0 q0,${height},${width},${height} `} stroke="#777" strokeWidth="2" />
        <Shape d={`m0,0 c0,${height},${width},${height},${width},0`} stroke="#777" strokeWidth="2" />
      </Surface>
    );

f:id:saburesan:20170831151543p:plain

LayoutAnimation

LayoutAnimationも効きますね(意味のないアニメーション)

f:id:saburesan:20170831153914g:plain