前置き
React Nativeで色々と試行をするため、ライブラリの導入を行いつつ色々な機能をテストしてみました。試しの一歩目に作るアプリのために導入したライブラリについて羅列していきます。
追記：
react-native-simple-dialogs
導入ライブラリ
ReactNativeのライブラリには、リンクが必要なものがあります。詳しくは↓の参考リンクから見てみてください。
react-native link
ライブラリ(モジュール)の削除
お試しに入れたので、使えなければ削除しておきたいところです。
(リンクしてあるものはこれをおこないます) npm unlink パッケージ名 (アンインストールはこちら) npm uninstall パッケージ名
NativeBase
(ライブラリのインストール) npm install native-base --save (NativeBaseとのリンクに必要なインストールコマンド) npm install (EXPOでNative Baseを使うにはこのフォントが必要) expo install expo-font
UIコンポーネント機能のライブラリ。ReactでいうMaterial UIのようなもの。iOSとAndroidのクロスプラットフォーム開発に有用。とのこと。
React Navigation
(本体) npm install @react-navigation/native --save (付随するライブラリ expoインストールすることでバージョンに合ったものが取得できる) expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view
画面推移のナビゲーションアプリ。基本的な画面移動の他、stack, tabs, drawerが表現できる。
試したけど使わなかったライブラリ
Redux
(4つのライブラリを一度にインストールしてます) (別々にインストールしても構いません) npm install redux react-redux redux-thunk redux-logger --save
Reactでも使えるstateのフレームワーク。storeを用いながら、state管理を行う。これを使うことでstateの受け渡しがconponent間で行える。JSON形式のデータを上手く扱ってstateを引き渡している。
いくつかのライブラリを一緒にインストールすることで、利便性が向上したりバグの混入を防げる。ただ、Reduxは学習コストが高いという事も有名らしく、私も執筆時点で機能のほとんどは理解していません。
- redux：Reduxそのもの。Reduxは別にReactじゃなくても使える。
- react-redux：ReactでReduxを使うためのライブラリ。conponentとReduxの連結とのこと。
- react-thunk：非同期通信とReduxの連携をするためのライブラリ。どうも非同期通信とReduxを素のまま使おうとするとなかなか厄介なようで、バグの原因ともなりえるとのこと。
- redux-logger：Reduxのstore(state保管庫)をconsole.logに出しながら、stateの管理がうまくいっているかを調べるための開発用ライブラリ。
今回のアプリでは今のところ未使用で済んだので、まだ使ってません。
react-native-router-flux
npm install react-native-router-flux --save
アプリの画面推移(Router)機能を付与します。React特有の爆速画面移動ですね。よく見かけるタブ機能も実装出来そうです。
が、私の環境ではうまく動作せず。単純に記述をミスってる可能性も大きいですが、古めのナビゲーションモジュールらしく、採用したReact Navigationに座を譲りました。
react-native-splash-screen
npm react-native-splash-screen --save
起動画面を設定するためのライブラリ。面白そうで導入しようと思ったが、最初からそういうの手を出すと大変になるなと思い、辞めました。
というのは建前で、これも上手く動作しませんでした。軽く触った程度なのでライブラリに問題は無さそうですが、躓くくらいならまだいいかなと私は思いました。
最後に
基本的には、最初のアプリ開発として基本となるNative BaseとReact Navigationがメインとなった感じです。
今後のバージョンアップでReduxやreact-native-storageのようなものを使っていくことでしょう。
