Download as PDF, PPTX
Uploaded byFumiya Sakai
ReactNative + Redux + NativeBaseでつくるサンプル実装をのぞく
React Native Meetup #8での登壇資料になります。 https://react-native-meetup.connpass.com/event/88031/ ReactNativeの復習やReduxの理解を深めていくことを目的に、簡単なサンプルアプリを構築する手順やライブラリの紹介、そしてReduxを自分なりに理解していく部分をまとめました。 私もそれほどReactNativeに慣れているわけではありませんが、ご参考になれば幸いです。 サンプル: ※もうちょっとサンプルには肉付けする予定です https://goo.gl/Z86gLc
ReactNative + Redux + NativeBaseでつくるサンプル実装をのぞく
- 1. ReactNative + Redux+ NativeBaseでつくる サンプル実装をのぞく ReactNative Meetup #8 @ freee様 2018 / 06 / 22 Fumiya Sakai
- 2. 自己紹介 ・酒井 文也 （FumiyaSakai） ・Designer → ServerSide Engineer → AppDeveloper Accounts ・Facebook: https://www.facebook.com/fumiya.sakai.37 ・Twitter: https://twitter.com/fumiyasac ・Github: https://github.com/fumiyasac ・Qiita: https://qiita.com/fumiyasac@github Who are you? Library (Personal) 【本職: Swiftを書いているiOSエンジニアです】 ReactNative歴は浅いです 仕事でやっていること : ・ メディカル/ヘルスケア系の新規アプリの開発 や保守全般(2本) ・ iOSアプリに関わるお仕事全般の担当＆ポジショ ンはサッカーで例えるならDFに該当。 何卒お手柔らかによろしくお願いします😓
- 3.
- 4. Reduxの思想や実装に慣れるためにやったこと SwiftでもReduxを実現するライブラリがあったのでまずはそこから試した 理解するまで苦戦した原因 ライブラリ名: ReSwift Step1: サンプル実装を見る Step2:ある程度Swiftで作って見る とまあ、自己分析するとこんな感じでした。。。 ・ これまではMVCまたはMVVMの構成での開 発が多かったので正直馴染みがなかった。 ・ そもそものReactNativeでのView構築の作 法やライフサイクルの違いの認識が甘かった。
- 5.
- 6.
- 7. 今回のサンプルで導入したライブラリの一覧 ライブラリ名 ライブラリの機能概要 バージョン firebase認証＆DB機能 5.0.3 react-native-router-flux 画面遷移のコントロール 4.0.0-beta.28 ライブラリ名 ライブラリの機能概要 バージョン redux Reduxの機能提供 4.0.0 react-redux ComponentとReduxの接続 5.0.7 redux-thunk 非同期通信 2.2.0 redux-logger stateのログ出力 3.0.6 ライブラリ名 ライブラリの機能概要 バージョン native-base UIコンポーネント 2.4.4 react-native-app-intro-slider 初回チュートリアル画面 0.2.4 ・ ReactNative: 0.54.2 ・ React: 16.3.0-alpha.2 ・ jestでユニットテストを行う場合には、transformIgnorePatternsに”/node_modules/(?!native-base|react-native-router-flux)/" DBや遷移などアプリの ベースになる機能 UIやデザイン要素の ベースになる機能 Reduxを導入するに あたって必要なもの
- 8. 基本的な概要設計 入力やデータを受け渡し等の状態管理をReduxで行い、遷移はRNRFでまとめる 画面A Reduxはデータの入力や出力のハンドリングを伴う画面で利用 (1) NativeBaseにあるDrawerの方が動きの細かい調整が可能 (2) タブを伴う切替えやDrawerの管理はReduxを使わない (3)画面に値を引き渡したい場合はRNRFを活用して遷移時に渡す ※DrawerやHeaderに関わる部分はNativeBaseで提供しているものを使う 画面B 画面遷移の部分は「react-native-router-flux」に任せてしまう Firebase認証 コンテンツ切替 画面C Firebaseデータ取得・更新
- 9. NativeBaseを活用してUIコンポーネントを作成する 1つの部品でiOS/Androidの両方のデザインを作ることができる 実装時に悩む点便利に感じた点 ・ iOS /Androidのデザインに関するガイドラインをある程度踏 襲したComponentが用意されているのがポイント ・ iPhoneXのSafeAreaも考慮 ・ 例) NativeBaseのレイアウトの流儀に従えばシンプルになる ・ NativeBaseの組み方から外れる、既存のレイアウトに微調整 が必要なシビアなUIコンポーネントになると実装がつらい スタイルの当て方よりも階層構造が大事！
- 10.
- 11.
- 12. 認証する場合のRedux実装を考える(2) 画面から必要そうなActionの状態をまずは考え出してみる 想定されうるActionの洗い出し (2) パスワードが入力された際にStateへ反映 (3) 新規登録・認証処理中の状態をStateへ反映 (1)メールアドレスが入力された際にStateへ反映 (4) 新規登録・認証処理成功の状態をStateへ反映 (5) 新規登録・認証処理失敗の状態をStateへ反映 今回の実装では1画面=1Stateとなるような形でState（画面状態）を設計する ・ 想定される状態からその画 面で欲しいStateを決定
- 13. 認証する場合のRedux実装を考える(3) 画面の中でActionを実行するためのActionCreatorを作成する 既存ユーザー情報でログインする際に実行されるActionCreator ログイン成功時：�dispatch({ type: LOGIN_USER_SUCCESS,payload: user }); ログイン失敗時：�dispatch({ type: LOGIN_USER_FAILURE }); <AuthForm />側でthis.props.loginUser() という形で実行できるようにする必要がある。
- 14.
- 15.
- 16. ユーザーデータをFirebaseに登録する際の処理 このComponent内で必要なStateやActionCreatorとの紐付け作業を行う 表示と入力のReducer分割 パラメータの引き渡しは下記の様にRNRFを利用 firebase.database() .ref(`/database/users/${currentUser.uid}/records`) .push({ title, content}) .then(() => { … }).catch(() => { … }); firebase.database() .ref(`/database/users/${currentUser.uid}/records/${uid}`) .set({ title, content }) .then(() => { … }).catch(() => { … }); 新規追加時： 更新時：
- 17. まとめ ReactNativeの実装はNative開発と勝手が違うが興味深い 1. ReactNativeの理解や特徴的な部分・Reduxの概念に関して 2. 実際にサンプルを作り込んでみての感想 ・JavaScriptの理解やComponent設計といった部分が足りなかったのでそこは要精進 ・Native開発でもReSwiftの様なライブラリがあることからRedux/Fluxの考え方は生かしていけそうな予感 ・今回はライブラリの機能に依存する部分が多かったので、特徴を把握しないとハマりやすい ・大きな設計になる際の注意点や今回使ったライブラリを用いない開発や定番の実装を心得ないと… 今回の登壇内で紹介したサンプルに関しましては、後日綺麗にコメントをつけてQiitaにもまとめる予定です😅😅 😅 ・ライフサイクルやアニメーションといったUI関連の部分は相変わらず関心があるのでキャッチアップしたい