Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
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