react-native-domを試す

デモを見て、どうしても試したくなったので、PIAZZAで試してみた。

PIAZZAのRN verは0.45.1のため、raect-native-domを直接入れる事はできなかった。 そこで、新規プロジェクトを作成して必要最小限のコードとデータを持ってきてタイムラインの表示ができるまでを試してみた。

作業時間は、2–3時間ほど。

環境

とりあえず動作確認できたものだけ抜粋

"dependencies": {
     "immutable": "^3.8.2",
     "react": "16.3.1",
     "react-native": "0.55.4",
     "react-native-animatable": "^1.2.4",
     "react-native-dom": "0.1.1",
     "react-native-router-flux": "^4.0.0-beta.31",
     "react-native-scrollable-tab-view": "^0.8.0",
     "react-redux": "^5.0.7",
     "redux": "^4.0.0",
     "redux-saga": "^0.16.0",
     "superagent": "^3.8.3",
   },
   "devDependencies": {
     "babel-jest": "22.4.4",
     "babel-preset-react-native": "4.0.0",
     "jest": "22.4.4",
     "react-test-renderer": "16.3.1",
     "reactotron-react-native": "^1.14.0",
     "reactotron-redux": "^1.13.0",
     "rnpm-plugin-dom": "^0.1.1"
   },

プロジェクト作成

Getting Startedの通りにやればいい。特に問題無し。

移植

新規作成したプロジェクトへ既存プロジェクトから最小限のコードを持ってきて、ちょっとずつエラーを解決していくだけ。。

デバッグ

reactotronが普通に使えたので問題無し。

ライブラリ

ract-native-router-flux

v4はじめて使ったが、Scene, tab共に問題無く動作。

redux/redux-saga

こちらも問題無し。

react-native-scrollable-tab-view

• Button.ios.jsやButton.android.jsとPlatoformでファイルが別れていたため、Button.dom.jsを作成した。(Button.ios.jsをcopy)
• Platform.OS === ‘ios’ を Platform.OS !== ‘android’ に変えてやると動く。だが表示は崩れる。

react-native-animatable

動いた。

通信

rails4

こちらを参考にクロスドメイン対応

クライアント

superagentでうまく行かなかったのでfetchへ変更。

fetch(url, { credentials: 'omit' })
                           .then(res => res.json());

メモ

• modal未対応
• Text: numberOfLinesは未対応
• スクリーンサイズを見て座標を調整してる箇所が一部ずれた。サイズ取得のタイミングの問題だろうか。
• スクロール位置を見てfetchする処理が上手く動かなかった。スクロール時のイベントが上手く取れてないか。実装されてないか。(movieデモは問題無さそうだが…)
• ScrollViewの引っ張って更新も動かない。引っ張れない。
• Text: allowFontScaling={false} 表示が崩れる。 

感想

• 既存プロジェクトはmovieデモのように動かすのは現時点では一筋縄ではいかない。
• 最初、ブラウザで赤いエラー画面が出るだけでもテンションがあがる。
• 完成度が高まれば、既存プロジェクトを簡単な修正のみでwebで動かせるようになるのではないだろうか。期待が持てる。
• 引き続き注目していきたい。