Save 37% off PRO during our Black Friday Sale! »

React Native 入門

React Native 入門

React Native のはじめ方

1f08ea77620130a61f488838c33cd141?s=128

Shigeki Yamato (Mori)

March 23, 2018
Tweet

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