Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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