4
4

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.

【初心者向け&メモ】react-native initしてwelcome画面出すまで

Last updated at Posted at 2018-09-23

やりたいこと

ただ、公式ドキュメントの通り手順を進めて
react-native run-iosコマンドでビルドしたい(welcome画面を表示したい)...
てだけ。

スクリーンショット 2018-09-23 23.43.01.png

公式ドキュメント↓
https://facebook.github.io/react-native/docs/getting-started

ただし、パッケージ管理はyarnでやりたい!(今回はnpm使いたくない)

手順

公式ドキュメントに言われた通りに手順を踏んでいく。

nodeのインストール
https://qiita.com/kuriya/items/36ae29366df0b7c95dec

  • node, watchmanのインストール
     インストール後、
    node --version
    v8.5.0
    watchman --version
    4.9.0
    て感じ。

  • react-native-cliのインストール
    npm install -g react-native-cliの代わりに
    yarn global add react-native-cliを実行した。
    ちなみに、yarnのバージョンは1.7.0です。
    バージョン確認すると、
    react-native --version
    react-native-cli: 2.0.1
    という感じに。

初期設定

これも言われた通りにやっていく(プロジェクトの名前はとりあえずAwesomeAppにした)

react-native init AwesomeApp

React Nativeのバージョンを指定したければ、
(多分こっちの方がいいんじゃないかと思う。)
react-native init AwesomeApp --version 0.55.4
を実行する。

ビルド

cd AwesomeApp
react-native run-ios

これで目的の画面出るはず。
ここで、例えばbabel関係のエラー出てビルド失敗することがあるらしい。
その時はreact nativeのバージョンが0.57だったのでバージョンを指定したら治ったそう。

4
4
0

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
4
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?