ReactNativeをインストールしスマホでプレビューする

この記事は 2018年2月23日 に書かれたものです

ReactNativeの公式ドキュメントGetting Startedの内容に沿ってインストールを進めます。

1 事前準備
- 1.1 今回導入する環境
- 1.2 nodeとnpmを「nodebrew」で入れる
2 ReactNativeのセットアップ
3 開発用にスマホ実機で確認する
4 参考ページ

事前準備

今回導入する環境

今回はmacOS HighSierraへ導入します。

nodeとnpmを「nodebrew」で入れる

node/npmが入っていなければ以下のようにします。

### nodebrewをインストール
$ brew install nodebrew
$ nodebrew --version
nodebrew 0.9.8

### nodebrew用のディレクトリ作成
$ nodebrew setup
Fetching nodebrew...
Installed nodebrew in $HOME/.nodebrew

### nodebrewのパスを通す
$ vi ~/.zshrc
export PATH=$HOME/.nodebrew/current/bin:$PATH
$ source ~/.zshrc

### node/npmを入れる
$ nodebrew install-binary stable
$ nodebrew use stable
use v8.9.4
$ node --version
v8.9.4
$ npm --version
5.6.0

私は普段zshを使っているため~/.zshrcを編集しましたが、デフォルトのbashを使用している場合は~/.bashrcなどに読み替えてくださいませ。また後ほど判明しますが、ReactNativeがnpmの5系に対応していないため、4系に落とす必要があります。

nodebrewの使い方は以下の記事も参考に。

Node.jsのバージョンをnodebrewで切り替える

https://blog.katsubemakito.net/nodejs/switch_version_with_nodebrew

インストールされたNode.jsのバージョンを切り替えたくなるタイミングがありますよね。バージョンアップの際はもとより特定バージョン下での挙動を確認したいとき、バージョンを上げたがうまく動かなくなってしまったので切り戻しを行いたい時などです。実現するためのツールはいくつかあるのですが今回は「nodebrew」をmacOSに入れてみます。nodebrewのインストールbrewで一発です。$ brew install nodebrew$ nodebrew --versionnodebrew 0.9.8setupを実行しディレクトリを作成した後に、作成されたディレクトリにパスを通します。こ...

ねこの足跡R

ReactNativeのセットアップ

CLIツールを入れる

### インストール
$ npm install -g create-react-native-app

プロジェクトを新規作成（1回目）

先ほどnpmでインストールしたコマンドcreate-react-native-appを試しに実行してみます。

$ create-react-native-app AwesomeProject
Creating a new React Native app in /Users/katsube/Work/AwesomeProject.

*******************************************************************************
ERROR: npm 5 is not supported yet
*******************************************************************************

oh…… :(´ཀ`」 ∠):
npmの5系は（現在のところ）対応していないようなので、4系を入れてあげる必要がありそうです。

npm 4.xを入れる

npm 4.xの最新バージョンはv4.6.1のようなのでコイツを追加で入れてやります。

$ npm info npm@4 version
npm@4.0.0 '4.0.0'
npm@4.0.1 '4.0.1'
（中略）
npm@4.6.0 '4.6.0'
npm@4.6.1 '4.6.1'

npmを使ってnpmを入れてあげますｗ

$ npm install -g npm@4.6.1
/Users/katsube/.nodebrew/node/v8.9.4/bin/npm -> /Users/katsube/.nodebrew/node/v8.9.4/lib/node_modules/npm/bin/npm-cli.js
+ npm@4.6.1
added 36 packages, removed 213 packages and updated 84 packages in 17.259s

$ npm --version
4.6.1

npmでのバージョンの確認方法は以下の記事も参考に。

npmでpackageのバージョンを調べる

https://blog.katsubemakito.net/nodejs/npm_info_version

npmを利用してパッケージのバージョンを確認したい場合のメモです。npm infoでバージョン確認バージョン一覧を表示すべてのバージョンを調べたい場合はこちら。大量にある場合は途中で省略されます。$ npm info (パッケージ名) versions$ npm info react versionsバージョンを絞り込む特定のメジャーバージョン以下に限定して表示することも可能です。version"s"ではなく、versionな点に注意。$ npm info react-vr@0.1 versionreact-vr@0.1.0 '0.1.0'react-vr@0.1.1 '0.1.1'react-vr@0.1.2 '0.1.2&...

ねこの足跡R

プロジェクトを新規作成（2回目）

前回エラーになったディレクトリが残ったままだとcreate-react-native-app時に怒られてしまうので削除したあとにもう一度プロジェクトを新規作成してみます。初回は必要なライブラリをまるっとダウンロードしてくるのでそれなりに時間がかかります。

### 前回のファイルをお掃除
$ rm -rf AwesomeProject/

### プロジェクトを新規作成
$ create-react-native-app AwesomeProject
Success! Created AwesomeProject at /Users/katsube/Work/AwesomeProject
Inside that directory, you can run several commands:

  npm start
    Starts the development server so you can open your app in the Expo
    app on your phone.

  npm run ios
    (Mac only, requires Xcode)
    Starts the development server and loads your app in an iOS simulator.

  npm run android
    (Requires Android build tools)
    Starts the development server and loads your app on a connected Android
    device or emulator.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd AwesomeProject
  npm start

Happy hacking!

今度はうまく行ったみたいですねヽ(ﾟ∀ﾟ)ﾒ(ﾟ∀ﾟ)ﾒ(ﾟ∀ﾟ)ﾉわーい

実行してみる

画面に表示されていたコマンドを打ってみますが…npm startでエラーが出ちゃいました。

$ cd AwesomeProject
$ npm start
> AwesomeProject@0.1.0 start /Users/katsube/Work/AwesomeProject
> react-native-scripts start

01:36:53: Unable to start server
See https://git.io/v5vcn for more information, either install watchman or run the following snippet:
  sudo sysctl -w kern.maxfiles=5242880
  sudo sysctl -w kern.maxfilesperproc=524288

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! AwesomeProject@0.1.0 start: `react-native-scripts start`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the AwesomeProject@0.1.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/katsube/.npm/_logs/2018-02-22T16_36_53_188Z-debug.log

画面に表示されている2つのコマンドを実行してあげます。

$ sudo sysctl -w kern.maxfiles=5242880
kern.maxfiles: 12288 -> 5242880

$ sudo sysctl -w kern.maxfilesperproc=524288
kern.maxfilesperproc: 10240 -> 524288

もう一度実行してみます。今度はエラーも出ずうまく行きました！

$ npm start

> AwesomeProject@0.1.0 start /Users/katsube/Work/AwesomeProject
> react-native-scripts start

01:38:17: Starting packager...
Packager started!

以下のようにTerminalにQRコードが表示されます。このQRはあとで使いますのでこのままにしておきます。