react-native-domをちょっと動かしてみた

いい加減触るかと思いたち、チュートリアルをしてみた

github.com

セットアップ

適当なサンプルプロジェクトをinitする

$ react-native init rndomExample

まずは普通にアプリを起動してみる

$ react-native run-ios

f:id:rskull:20180526015755p:plain

ふむ

次に本題のセットアップ

$ yarn add --dev rnpm-plugin-dom
$ raect-native dom

パッケージを追加してコマンドを実行すると、新しいファイルが作成される

f:id:rskull:20180526014509p:plain

あとは起動するだけ

$ react-native run-dom

ターミナルが立ち上がって、すぐにブラウザが立ち上がる

f:id:rskull:20180526015927p:plain

ブラウザで同じ画面が表示された

すごい

検証

LayoutAnimationとか動くのかな?と思って動かしてみた

簡単なサンプルだけど、ほぼ完璧に同じ動きしててすごい

左がアプリで右がウェブ

f:id:rskull:20180526024317g:plain

ここまでのソース

GitHub - rskull-sandbox/rndomExample: example for react-native-dom

どうやって動いてるのか?

すごく詳しく仕組みを解説してくださっているので

気になる方はこちらの記事を見てください!

blog.nkzn.info

ここまで理解できるのすごい

これが精一杯(花)