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
Author And Source
この問題について(ReactNativeをなんとなく理解するためのReactCanvas), 我々は、より多くの情報をここで見つけました https://qiita.com/mizchi/items/f63ee54bb71e67370521著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .