react-native-domを試した(NativeBaseで)

react-native-domとは

React NativeをWebで動かすという試みが(多分)注目されていて、
その中でreact-native-domという、素晴らしいライブラリが存在する。

GitHub - vincentriemer/react-native-dom:

Vincent Riemerという、未来からやってきたエンジニアが作ったもの。
この方はEDMのプロデューサーもやっていて、TR-808のシミュレーター「iO-808」の作者でもある。

2018年のコンピューターでもreact-nativeが動くように、下記のような機能を実装している。

  • iOS/Androidのようなプラットフォームとして「dom」を追加
  • WebWorkerでのマルチスレッド処理
  • Yoga Layout(スマホ向けのFlexBoxなエンジン)をwasmで移植してレンダリングに使う

導入方法は、GitHubのチュートリアルをやるのが一番わかりやすい。

ReactNative for Webのようなものではなくて、レンダリングなどを忠実に再現し、Web自体をReact Nativeのプラットフォーム化しようと試みている感じ。
おそらくNativeBase + React Navigationな構成でもやってくれるだろうと思いつつ、やってみた。
さすがに無理があったけど、わりと再現できていた。

まず、native側で動くようなそれっぽいのを作る。

rndom1

プロジェクトのフォルダにrnpm-plugin-domを追加。

yarn add --dev rnpm-plugin-dom

react-native domコマンドで、「dom」フォルダが生成される。

react-native dom

react-native startをやって、localhost:8081/dom/へ。

react-native start

真っ赤になった。
transparentのついたButtonがダメくさい。

rndom2

Platform.OSで’dom’が返るので、 Buttonの属性に以下を指定して、transparentを無効化。

transparent = {Platform.OS === 'dom' ? false : true}

消したらできた。 すごい…。

rndom3

でも、Iconファイルは読み込まれず、豆腐が出ている。

というか、クルクルから先に進まない。
エラーも出ない。

CORSにひっかかってるのかな…?

ならブラウザじゃなくてアプリ化すればいいのか。
というのは本末転倒にも程がある。

とりあえず対策した。

rndom4

Textが折り返していない。 Text要素にflex: 1を指定する。

rndom5

折り返したけど、Cardの高さが…。

その他もRefreshControlとReact Navigationが動かなかったり問題が多いけど、
とにかく動いた。

NativeBaseのモジュールをいじってたら、React Navigationは動いた。
タブの切り替えができるようになった。

rndom6

写真ではわかりづらいけど、「Channels」タブに移動できている。(そしてクルクルが終わらない)
相変わらず、RefreshControlは動かない。

テーマもiOSのものに変えた。

rndom7

それに伴い、Buttonにtransparentもつけたが、動くようになった。 これ以上は闇が深そうなので諦める…。

PCサイズ。

rndom8

PCとモバイルで共有できるコードをReactで書けるのがよい。
それらのコンポーネントをどの段階にまで落とし込めるのかは未知数だけど、夢が広がる。