Edited at

Expo ではじめる ReactNative 開発環境

More than 1 year has passed since last update.

某所で調べた資料


Expo とは

https://expo.io/

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あんまり好きじゃないが。