13
11

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

【ReactNative】環境構築

Last updated at Posted at 2019-01-06

開会式

今までWebアプリしか作ったことがなかったので、そろそろスマホアプリを開発したいと思います。
iOS, Androidどちらも作りたいので、Swift, Kotlinを学習しようと思いましたが、片方で燃え尽きそうなので共通して開発が可能なReactNativeで開発しようと思います。

作るもの

出会い系じゃないマッチングアプリ

環境構築

以下のドキュメントにしたがってget start!(一旦iOSだけ)
https://facebook.github.io/react-native/docs/getting-started

nodeとwatchmanをinstall

$ brew install node
$ brew install watchman

nodeのバージョンは、8.3以上推奨
watchmanはReact Nativeを開発したFaceBookが推奨しているファイル変更管理ツール

The React Native CLIのinstall

$ npm install -g react-native-cli

npmはnodeと共にinstallされるので、すでに使用できる状態になっていると思います。
CLI(Command Line Interfaceの略)

※もしエラーが出た場合以下で実行

$ curl -0 -L https://npmjs.org/install.sh | sudo sh

Xcodeのinstall

こちらはAppStoreにてダウンロード(結構時間と容量がかかります)

React Native Projectの作成と、シミュレーター起動

$ react-native init ProjectName
$ cd ProjectName
$ react-native run-ios

すると、以下のようなシミュレーターが立ち上がる

スクリーンショット 2019-01-06 13.03.21.png

index.jsが読み込まれると、以下のような画面になります

image.png

まとめ

基本的にドキュメントだけみていれば問題ないです。
2の際に、エラーが出続けたのですが、nodeのバージョンがv10.2.1とかだったのを、brew node upgradeしてv11.6.0にしたらできました。

13
11
1

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
  3. You can use dark theme
What you can do with signing up
13
11

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?