React-Native環境構築

React Nativeをやってみようと思い、環境構築をした話

jsもあまり書いたことないのですが、React Nativeで遊んで見ようかと思って、
環境作ってみました。

環境

MacOS 10.14.6(mojave)
MacBook Pro(2015)

最初にやったこと

よくわからなかったので、サイトを参考にして、見よう見真似でやってみた。

$ brew install node
$ brew install watchman

watchmanのところで、pythonのインストールが勝手に走ってる、、、
すでにpyenvで各種入れてるのだけど、、、(まあ、/usr/local/binに入れる分にはいいか)

$ npm install -g react-native-cli

この辺までは普通に通るのだが、、、、

$ react-native init ProjectName

ここで、やたらとWARNやらエラーやらが、、、

# ----中略-----
> fsevents@1.2.9 install /Users/seiketomoaki/Documents/react-native/ProjectName/node_modules/fsevents
> node install

node-pre-gyp WARN Using needle for node-pre-gyp https download 
node-pre-gyp WARN Tried to download(404): https://fsevents-binaries.s3-us-west-2.amazonaws.com/v1.2.9/fse-v1.2.9-node-v79-darwin-x64.tar.gz 
node-pre-gyp WARN Pre-built binaries not found for fsevents@1.2.9 and node@13.2.0 (node-v79 ABI, unknown) (falling back to source compile with node-gyp) 
Traceback (most recent call last):
  File "/usr/local/lib/node_modules/npm/node_modules/node-gyp/gyp/gyp_main.py", line 50, in <module>
    sys.exit(gyp.script_main())
  File "/usr/local/lib/node_modules/npm/node_modules/node-gyp/gyp/pylib/gyp/__init__.py", line 554, in script_main
# ----中略-----
gyp ERR! configure error 
gyp ERR! stack Error: `gyp` failed with exit code: 1
gyp ERR! stack     at ChildProcess.onCpExit 

他に大量に出てるのだが、なんかpythonのエラーじゃん、、、、
で、gyp(?)がエラーとかわけわかりませんが、、、、
そもそもgypって何だ？
早くも暗雲が、、、

これってバージョンが新しすぎるとかか。
しかし、バージョン複数入れられるような形にしなかったしな、、、
一旦、削除することに。

$ npm uninstall -g react-native-cli #これをしとかないと、/usr/local/lib/node_modules/が消えない。
$ brew uninstall watchman #これはやらなくても、問題なかった模様
$ brew uninstall node

今度はnvmを利用してインストールする。

$ brew install nvm
$ mkdir ~/.nvm

# 以下は、.bash_profileに記載
 export NVM_DIR="$HOME/.nvm"
[ -s "/usr/local/opt/nvm/nvm.sh" ] && . "/usr/local/opt/nvm/nvm.sh" 
[[ -r "/usr/local/etc/profile.d/bash_completion.sh" ]] && . "/usr/local/etc/profile.d/bash_completion.sh"

# 取り込む
$ source ~/.bash_profile
# 確認
$ nvm --version
0.35.1
# nodeのインストール
$ nvm install --lts #LTSの最新取り込み
# $HOME/.nvm以下にインストールされた。
$ nvm list
->     v12.13.1
default -> lts/* (-> v12.13.1)
node -> stable (-> v12.13.1) (default)
stable -> 12.13 (-> v12.13.1) (default)
iojs -> N/A (default)
unstable -> N/A (default)
lts/* -> lts/erbium (-> v12.13.1)
lts/argon -> v4.9.1 (-> N/A)
lts/boron -> v6.17.1 (-> N/A)
lts/carbon -> v8.16.2 (-> N/A)
lts/dubnium -> v10.17.0 (-> N/A)
lts/erbium -> v12.13.1
# npmをバージョンアップ
$ npm update -g npm
$ npm install -g react-native-cli

# 適当なディレクトリで初期化
$ mkdir $HOME/Documents/react-native
$ cd $HOME/Documents/react-native
$ react-native init ProjectName

最初の方は順調だったのだが、なんかエラーが、、

checking for arm-apple-darwin-gcc... /Library/Developer/CommandLineTools/usr/bin/cc -arch armv7 -isysroot 
checking whether the C compiler works... no
xcrun: error: SDK "iphoneos" cannot be located
xcrun: error: SDK "iphoneos" cannot be located
xcrun: error: SDK "iphoneos" cannot be located

xcodeの参照先パス？が違うらしい。

#現在の状態
$ xcode-select -p
/Library/Developer/CommandLineTools
#変更してみる
$ sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer/
#結果確認
$ xcode-select -p
/Applications/Xcode.app/Contents/Developer

起動

Documents/react-native/ProjectName/ios/ProjectName.xcworkspace
を開く。

※ProjectName.xcodeprojを開くと、

 ld: library not found for -lDoubleConversion error occurs. I could build react-native run-ios

とか言われる。