技術メモ

Scala,React Nativaなどの技術メモ

NavigatorIOSからの脱却2

最新ReactNativeでビルドまで

papuaaaaaaa.hatenablog.com

環境ぽい原因で一度失敗したので、react-native入れなおすところから。 nodeのバージョンもあげる。

npm install -g react-native-cli あたらしいcliが入っていればreact-native initしたときに新しいバージョンを入れてくれるぽい。

空のプロジェクトのビルドが通らない。 Command /bin/sh failed with exit code 1

qiita.com

qiita.com

このあたりのパス通ってない話かと思って、zshじゃなくてbash使ってるからか?なんて思って、 Build Phases > Bundle React Native code and iamagesのShellの設定をいじったりもしてたけど、 xcodeのエラーログを読んだら、const絡みのSyntax Errorだったのでnodeが原因かな。

別な原因なのにこのエラーがでていることもありそう。エラー前まで戻って、ビルドせずにエミュレータのリロードで 変更を確認できるように開発を進めると、正しいエラーメッセージが得られることもあった。

react-native-scrollable-tab-view/FacebookTabBar.js at master · brentvatne/react-native-scrollable-tab-view · GitHub にてreact-native-iconsライブラリをリンクしていないことが原因など。

nvmでいまいちちゃんとnodeのバージョンちゃんと固定されないなと思っていたところ。 nvm alias default v5.3.でビルド通るところまでいけた。

なんか気付かなかったけど、react nativeのサーバも裏で自動で走るようになってる。 いままでいつからか手動でしてたぽい。

react-native-scrollable-tab-viewを導入する

github.com

READMEのサンプルコードが少しおかしかったので修正しといた。

github.com

いい感じにいけた。アイコンの下にラベルをいれるためには、本家のソースをいじる必要がありそう。 タブをまたいでジャンプしたときに、アイコンの色が灰色に戻りきらないバグがありそうな感じ。 ソースコードはとても参考になりそう。

アイコンの色はissueにあがってた。

github.com

react-native UIExplorerのはまり

開発しながらUIExplorerでサンプルを確認したいので、ローカルでserverを2つ動かしたいんだけど、どうもポートが被る。 AppDelegate.mのポート番号書き換えるだけで行けた気がしたんだけど、npm startするたびに8081でしか起動してくれない。

RCTWebSocketExecutor.mやpackager/package.jsonの./packager.shに--port=8080のようなオプションを書いたりしてもだめ。 仕方ないのでserverをbundleすることにする。AppDelegate.mにも説明が書いてあるのだけど、

  1. ローカルでnpm start
  2. curl でjsbundleつくって
  3. AppDelegate.mでOption2を使うようにコメントアウトを編集する
  4. それをプロジェクトに読み込ませる

の手順でできる。 このあたりが参考になった。 PCと繋ぐ必要がないので便利。これは正解だった。

stackoverflow.com

まとめ

ということで、NavigatorIOSからの脱却には成功したぽい。