react-native

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