search
LoginSignup
0

More than 1 year has passed since last update.

posted at

updated at

React Nativeの事始め。TypeScript とReact Native Navigationの設定まで

この記事を書いた動機

職場で使用している技術の勉強のため
自分で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をつければ実行でき、無事ネイティブファイルに変更が加わった。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
0