ReactNativeをなんとなく理解するためのReactCanvas

個人的にはそこまでReactNativeに興味ないのだけど、今日なんとなくReactCanvasを試していたらなんとなくReactNativeを察した。

Flipboard/react-canvas https://github.com/Flipboard/react-canvas

作者はCanvasのネイティブ向け変換を作っていたEjectaの人。なるほど感ある。

参考: React Nativeがスマホアプリのフロント開発を変えるのか - ワザノバ | wazanova http://wazanova.jp/items/1676

試してみる

SurfaceがReactCanvasのトップノードでそれ以下はcanvasでレンダリングされる
各ノードはleft, top, width, height が必須の絶対座標配置。CSSが分かる人は position: absoluteな状態だと思えば良い。

React = require('react')
ReactCanvas = require('react-canvas')

MyComponent = React.createClass
  render: ->
    {Surface, Image, Text, Group, ListView} = ReactCanvas;
    $ = React.createElement
    $ Surface,
      width: window.innerWidth
      height: window.innerHeight
      left:0
      top:0
    , [
        $ Text, style: {left: 10, top: 10, width:100, height: 20},  'A'
        $ Text, style: {left: 10, top: 30, width:100, height: 20},  'B'
      ]

window.addEventListener 'load', =>
  React.render React.createElement(MyComponent, {}), document.body

enableCSSLayout: trueすると left, topは必須ではなくなり、CSS的なリキッドレイアウトによって配置される

React = require('react')
ReactCanvas = require('react-canvas')

MyComponent = React.createClass
  render: ->
    {Surface, Image, Text, Group, ListView} = ReactCanvas;
    $ = React.createElement
    $ Surface,
      width: window.innerWidth
      height: window.innerHeight
      enableCSSLayout: true
    , [
      $ Group, style: {backgroundColor: 'red'}, [
        $ Text, style: {width:500, height: 20},  'A'
        $ Text, style: {width:500, height: 20},  'B'
        $ Text, style: {width:500, height: 20},  'C'
      ]
    ]

window.addEventListener 'load', =>
  React.render React.createElement(MyComponent, {}), document.body

backgroundColorとか一部のプロパティが有効っぽい。

ノードの要素は他にImage や ListViewがある。ListViewを最小要素まで分解して動かしてみようとしたが引数がクッソ多くて面倒臭かったのであとでやる。

ReactCanvasの立ち位置

• ReactNativeの発想でCanvas向け書き出しを作ってみたというもの?
• 各OSプラットフォーム向けバインディングが書かれたのがReactNativeなのだろう

今ReactNativeを試したい人はこれでやると手触りがわかりそうな感じ。
おそらくReactNativeは埋め込んだV8でプラットフォーム向けAPIブリッジを書いて提供される or 自分で書けるっぽい気がする。APIブリッジの点でTitaniumの辛いAPIを思い出されるが…そこはまあ頑張ってくださいという感じか。ReactNativeはReactの思想だけ継承して環境ごとに別途書くっぽいし。

たとえばTextノードの実装はここ

react-canvas/Text.js at master · Flipboard/react-canvas https://github.com/Flipboard/react-canvas/blob/master/lib/Text.js