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

目次 ● React Native とは ● はじめ方 ● 開発環境 ● UIライブラリ ● ルーティング(画面遷移) ● 環境変数 ● アプリへのコンバート 2

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

React Native とは ● まだまだ発展途上 ● ドキュメントが弱い ● ライブラリが(React.jsほど) ない ● デバイス固有の操作（カメラ、GPS、センサー系）に弱い(作り込みましょう) ● クロスプラットフォームとは言っても、iOSだけAndroidだけの機能は普通にある （特にAndroid向けが少ない印象) 4

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

開発環境 ● expo を使って作りながら動作確認をする環境を作る(CRNA標準) ○ iOS, Android でそれぞれ Expo アプリをインストール ○ Expo アプリでQRコードを読み取る(同一ネットワーク内） ○ 動作確認がすぐに出来る ○ ファイル保存後、即反映 6

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

ルーティング ● アプリの画面遷移は少し特殊 ○ スタック ○ ナビゲーションドロワー ● React Navigation が公式におすすめされている 8

環境変数 ● 開発環境と本番環境で環境変数を切り替えたい場合 ○ env.js で __DEV__ の true/false をチェック ○ iOS, Android それぞれで使える 9

アプリへのコンバート ● アプリの実ファイルを出力するには eject が必要 ○ リリース時には eject してから、ファイルを作るのがよさそう ○ 一度 eject すると元に戻りません！！（要注意） 10

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

参考文献 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

参考文献 プロジェクト変換の話 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

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