React Native 入門

Transcript

1. React Native 入門 オウチーノ技術部定例LT 2018.03.23 山戸茂樹 1

2. 目次 • React Native とは • はじめ方 • 開発環境 •

   UIライブラリ • ルーティング(画面遷移) • 環境変数 • アプリへのコンバート 2

3. React Native とは • React.js を使ってモバイルアプリ(iOS, Android) を作成出来る JavaScript フ

   レームワーク • クロスプラットフォームでネイティブアプリを開発出来るうれしさ • 有名アプリへの導入実績（Facebook, Instagram, Airbnb) • ライフサイクルが React.js と一緒 (みたいになるように裏で動かしてる) 3

4. React Native とは • まだまだ発展途上 • ドキュメントが弱い • ライブラリが(React.jsほど) ない

   • デバイス固有の操作（カメラ、GPS、センサー系）に弱い(作り込みましょう) • クロスプラットフォームとは言っても、iOSだけAndroidだけの機能は普通にある （特にAndroid向けが少ない印象) 4

5. はじめ方 • create-react-native-app (CRNA) を使ってテンプレートを作る ◦ すぐに書き始められる ◦ アプリをエクスポートする場合に注意が必要 5

6. 開発環境 • expo を使って作りながら動作確認をする環境を作る(CRNA標準) ◦ iOS, Android でそれぞれ Expo アプリをインストール

   ◦ Expo アプリでQRコードを読み取る(同一ネットワーク内） ◦ 動作確認がすぐに出来る ◦ ファイル保存後、即反映 6

7. UIライブラリ • React Native 自体でもUIの差異は吸収してくれる • NativeBase を使うとより簡単にUI部品を配置できる ◦ カスタマイズは要確認

   7

8. ルーティング • アプリの画面遷移は少し特殊 ◦ スタック ◦ ナビゲーションドロワー • React Navigation

   が公式におすすめされている 8

9. 環境変数 • 開発環境と本番環境で環境変数を切り替えたい場合 ◦ env.js で __DEV__ の true/false をチェック

   ◦ iOS, Android それぞれで使える 9

10. アプリへのコンバート • アプリの実ファイルを出力するには eject が必要 ◦ リリース時には eject してから、ファイルを作るのがよさそう ◦

    一度 eject すると元に戻りません！！（要注意） 10

11. まとめ • おすすめする方 ◦ とりあえずクロスプラットフォームでアプリを作りたい ◦ 複雑な要件はない ◦ デバイスもそんなに使わない ◦

    React.js 書ける 11

12. 参考文献 ReactNativeの話 https://facebook.github.io/react-native/ https://github.com/react-community/create-react-native-app https://expo.io/ https://nativebase.io/ https://reactnavigation.org/ https://www.manning.com/books/react-native-in-action 12

13. 参考文献 プロジェクト変換の話 http://itexplorer.hateblo.jp/entry/20170904-create-react-native-app-eject https://github.com/react-community/create-react-native-app/blob/master/EJE CTING.md 13

14. 参考文献 アプリ署名の話 https://support.google.com/googleplay/android-developer/answer/7384423?h l=ja https://facebook.github.io/react-native/docs/signed-apk-android.html 14