この記事を書いた動機
職場で使用している技術の勉強のため
自分でReact NativeとTypeScriptを使ってでアプリを作ってみようと思う。
React Native Navigation周りでちょっと手こずったので、記録用。
環境
- macOS v10.15.4
- node.js v12.16.2
- npm v6.14.4
- react v16.11.0
- react-native v0.62.2
- react-native-navigation v6.4.0
TypeScriptでReact Nativeを始める
Xcode、Android Studioなどの環境とReact Nativeの初期設定。
どんなふうにするかは、こちらのReact Native CLI Quickstartを参照。
ただし！！
TypeScriptで初めからやるなら
Creating a new applicationのところで
下記の通り--template react-native-template-typescriptをつける。
npx react-native init /*** 君の作りたいアプリ名を入れよう！ ***/ --template react-native-template-typescript
とりあえずここまで行けば、npx react-native run-iosをすればシミュレータが起動してアプリが立ち上がる。
React Native Navigationの設定。
まずはreact-native-navigationをインストール
npm install --save react-native-navigation
で！ここで詰まった。
React Native Navigationの公式ドキュメントには、この後react-native link react-native-navigationを打てばiosとAndroidそれぞれのネイティブファイルに自動で変更が加わるはずなんですけど、下記のようなエラーが・・・。
zsh: command not found: react-native
原因は単純だった。
そもそもReact Nativeの公式ドキュメント通りに設定をしていくとnpxコマンドを使って、react-nativeをグローバルにインストールせずに実行することになる。
react-native link react-native-navigationはグローバルインストールされたreact-nativeが存在しないので、command not foundのエラーが起きる。
なので・・・。
npx react-native link react-native-navigation
単純にnpxをつければ実行でき、無事ネイティブファイルに変更が加わった。