はじめに

ios開発をしたいな〜と思い、色々ググったらReactnativeのことを知りました。
環境構築にハマったので、その葛藤を備忘録に残します。

あくまで個人の備忘録ですが、困っている人の助けになればいいなと思います。
初めての投稿ですのでお手柔らかにお願いします。

開発環境

Mac OS X
(windowsのかたごめんなさい)

node・npm

v11.2.0
6.4.1

watchman

watchmanをインストールします。

$ brew install watchman

インストール

React Native CLIをインストールします。

$ npm install -g react-native-cli

ですが、ここでハマりました。

ハマった...

npm ERR! code EACCES
npm ERR! errno -13
npm ERR! syscall access
npm ERR! Error: EACCES: permission denied, access '/Users/userName/.npm-global/lib/node_modules/react-native-cli'
npm ERR!  { [Error: EACCES: permission denied, access '/Users/userName/.npm-global/lib/node_modules/react-native-cli']
npm ERR!   stack:
npm ERR!    "Error: EACCES: permission denied, access '/Users/userName/.npm-global/lib/node_modules/react-native-cli'",
npm ERR!   errno: -13,
npm ERR!   code: 'EACCES',
npm ERR!   syscall: 'access',
npm ERR!   path: '/Users/userName/.npm-global/lib/node_modules/react-native-cli' }
npm ERR! 
npm ERR! The operation was rejected by your operating system.
npm ERR! It is likely you do not have the permissions to access this file as the current user
npm ERR! 
npm ERR! If you believe this might be a permissions issue, please double-check the
npm ERR! permissions of the file and its containing directories, or try running
npm ERR! the command again as root/Administrator (though this is not recommended).

対策

1.グローバルインストールのためのディレクトリを作成する

$ mkdir ~/.npm-global

2.新しいディレクトリを使う設定をnpmで行う

$ npm config set prefix $'~/.npm-global'

3.~/.profileを開くか作成し，以下の行を追加する

$ export PATH=~/.npm-global/bin:$PATH

4.3の変更を反映する

$ source ~/.profile

結果

もう一度インストールします。

$ npm install -g react-native-cli

お！？さっきとは違う

$ /Users/userName/.npm-global/bin/react-native -> /Users/userName/.npm-global/lib/node_modules/react-native-cli/index.js
+ react-native-cli@2.0.1
updated 1 package in 1.937s

無事インストールできました！！

$ react-native -v
react-native-cli: 2.0.1
react-native: n/a - not inside a React Native project directory

$ react-native init sample

上記のコマンドでフォルダを作成して実行します

react-native run-ios

参考

参考にさせて頂いた皆様、ありがとうございます。

React-native環境構築-備忘録