React NativeのARTを使って図形描画をしてみる

React NativeにはDocsにはないARTという、SVGっぽい形で図形描画できるライブラリがあります。
新たにライブラリ追加することなく使うことができますし、一応公式なので安心感もあります。
そんなARTを少し触ってみたので、導入手順と使い方を残しておきます。

導入手順

まずはいつもの初期手順でiOSで起動までします。

react-native init ARTSample
cd ARTSample
react-native run-ios

AndroidはそのままでOKなので、iOSだけXcodeで以下の設定が必要です。
自動リンクの方法があるのかもですが、とりあえず手動リンクします。

1. ARTSample/ios/ARTSample.xcodeproj を開きます
2. Librariesを右クリックして、 Add File to ${PROJECT_NAME} をクリック
3. ARTSample/node_module/react-native/Libraries/ART/ART.xcodeproj を選択
4. Xcode上で ARTSample/ios/ARTSample.xcodeproj を選択して、Build Phasesを開きます
5. Link Binary with Libraries の＋ボタンを押します
6. libART.a を追加します

これで準備完了です。

サンプルコード

とりあえずパッと動かしたいので、 index.ios.js を編集して、図形描画してみます。
なお、ライブラリ追加をしているので、 react-native run-ios か、Xcode上で再実行を行ってください。

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

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

export default class ARTSample extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Surface width={100} height={100}>
          <Shape
            d={'M50 0 L 0 100 L 100 100 Z'}
            fill={'red'}
            strokeWidth={1}
          />
        </Surface>
      </View>
    );
  }
}

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

AppRegistry.registerComponent('ARTSample', () => ARTSample);

こんな感じで表示されます。

ShapeコンポーネントのdプロパティにはSVGのパスデータ文字列を入れるそうで、SVGのパスデータ文字列を解説したこのページが参考になりました。
結構な表現力がありそうです。
http://defghi1977.html.xdomain.jp/tech/svgMemo/svgMemo_03.htm

まとめ

React NativeのARTは図形描画をクロスプラットフォームで手軽に行えるので、
データに合わせて色を替える必要が合ったりなど、画像では対応できない場合などちょっと図形描画したいと思った時に便利です。
Docsにないのが少し不安ですが、Deprecatedになる場合も何かしらのアナウンスがあると期待……。

各コンポーネントの詳細はGitHub上で確認するのが良いのかなと思います。
https://github.com/facebook/react-native/tree/master/Libraries/ART

参考

• http://browniefed.com/blog/getting-react-art-running-on-react-native/
  • 導入手順含め参考にさせてもらいました
  • Reactのアイコンをサンプルとして用意しており、複雑な図形を作る際の参考になります