某所で調べた資料
Expo とは
ReactNative上で、JS のみで ios/android アプリを作る開発/ビルド環境。ネイティブプラグインが使えないという縛りを受け入れることで、アプリをQRコード経由で簡単に公開したり、共有したりできる。
ios/android のコードを書かなくていい、というか一切書けない。
参考: expo.ioを使ってリアルタイムにReact Nativeアプリを開発する http://amagitakayosi.hatenablog.com/entry/2017/04/18/120000
Hello World
$ npm install -g exp
$ exp init my-native-app
$ exp start # 開発用ビルドの開始
$ exp build:ios # 本番用ビルド
テンプレートで blank か tabs を選べる。tabsはややリッチ過ぎるきらいがあるが、プッシュ通知のコードサンプルがついてくるので便利かも。
or
npm install -g create-react-native-app
create-recat-native init my-native-app
create-react-app の native 版。
Expo での動作確認
- iOSシミュレーター on Mac
- iOS実機: ExpoClient を DL。起動時のQRコードをスキャン
Androidは試してないけど似たようなもののはず。
Expo で得られるもの、失うもの
- ネイティブAPIはExpo側で用意されたものだけ使える
- Google Map
- カメラ
- Audio
- Video
- Facebook Auth
- プッシュ通知
- 他、JSでできることはJSでやる
ReactNativeのパフォーマンスはそこまで良くないという話だが、どのへんが重いのかまだ調査しきれていない。
Expo を使う場面
- プロトタイピング
- JSエンジニアの片手間
Expo を選ぶべきでない場面
- 手触り感を突き詰めたい
- ネイティブAPIを使う要件が全く排除できない
Expo からの脱出
CRNA 版の場合
npm run eject
ios/android のエントリポイントのJava/ObjCのコードが見えるようになるので、あとはXCode/AndroidStudio でビルドすればよい。
資料
コンポーネント集
- NativeBase
たぶんNativeBaseが一番使い勝手がいい。
Router
Webエンジニアがよくやる間違いだが、そもそもWebのブラウザヒストリを想定してはいけない。ネイティブアプリの抽象は基本的にタブとスタックが基本となる。
- react-native-router-flux
- react-navigation
- ExNavigation
expo で使う場合、 react-navigation がいいと思う。
ExNavigation はExpoの古いサンプルに載ってるが、公式に react-navigation に置き換えられるとのこと。
https://hackernoon.com/migrate-from-exnavigation-to-react-navigation-1af661ec5082
認証
基本的にJSでやる。よくある AccessToken をヘッダにつけるやつとかで解決することになると思う。
ExpoにはFacebookの認証UIだけ組み込みで入ってる。邪悪。
永続層
react-native の async-storage を使う。
https://facebook.github.io/react-native/docs/asyncstorage.html
プッシュ通知
Expoにある
https://docs.expo.io/versions/v18.0.0/guides/push-notifications.html
CI
PRごとにQRコードを貼ってくれるやつ。 https://github.com/FormidableLabs/appr
Jestのテストランナーが付いてる。個人的には、Jestあんまり好きじゃないが。