今回流行りのreact nativeを試してみたく私用Macマシンと会社用Macマシンの2台にインストールしてみたのだが、片方は10分もかからずにインストールが終わってめでたくhello worldが拝めたものの、もう片方はがっつりハマったのでそのときのトラブルシューティングやらを少しまとめてみました
react-native-cli: 2.0.1
react-native: 0.44.2
xcode: 8.3.2
react-native run-iosでこけた
どきどきわくわく、初の起動コマンド！
だが、しかし、、、、
port8081が使えないために落ちる
こんなエラーが吐かれる
** BUILD FAILED **
The following build commands failed:
PhaseScriptExecution Start\ Packager ${PROJECT_HOME}/ios/build/Build/Intermediates/React.build/Debug-iphonesimulator/React.build/Script-006B79A01A781F38006873D1.sh
(1 failure)
Installing build/Build/Products/Debug-iphonesimulator/プロジェクト名.app
An error was encountered processing the command (domain=NSPOSIXErrorDomain, code=2):
Failed to install the requested application
An application bundle was not found at the provided path.
Provide a valid path to the desired application bundle.
Print: Entry, ":CFBundleIdentifier", Does Not Exist
Command failed: /usr/libexec/PlistBuddy -c Print:CFBundleIdentifier build/Build/Products/Debug-iphonesimulator/プロジェクト名.app/Info.plist
Print: Entry, ":CFBundleIdentifier", Does Not Exist
この場合、port:8081 が本当に使われているか確認
sudo lsof -i :8081
何かしら出てきたらそのportは使用中
(McAfeeのアンチウイルスソフトとかが8081を使っている場合があるみたい)
→公式
解決方法はここらへんに載っていたが、この通りやってもダメだった
なので原始的に8081でgrepして、Binaryっぽいやつ以外でヒットしたものを地道に8999とかに修正したらこのエラーは消えた
cd {initで作成したプロジェクト}
grep "8081" -nR ./
watchmanでディレクトリがないよと怒られる
Loading dependency graph...XXXXXX while computing sockname: failed to create /usr/local/var/run/watchman/XXXXXX-state: No such file or directory
Watchman: watchman --no-pretty get-sockname returned with exit code=1, signal=null, stderr= XXXXXX: [XXXXXX] while computing sockname: failed to create /usr/local/var/run/watchman/XXXXXX: No such file or directory
本来は自動で作成してくれそうなものだがなかった
これは普通に
/usr/local/var/run/watchman/
にアクセスできるよう足りないディレクトリをmkdirで作成すればエラーは消えた
私の場合は、runとwatchmanがなかった
web用のReactを移植したらこけた
そんな簡単にはいかないだろうけど、見よう見まねでnative版へ移植するも、、、
jsxを認識してくれずエラー
UnableToResolveError: Unable to resolve module `Hoge.jsx` from `index.ios.js`: Directory Hoge.jsx doesn't exist
拡張子をjsxからjsに変えたらエラーは消えた
よくわからんObjectまわりでエラー
Expected a component class, got [object Object].
divタグなどが残っていると発生する
View, Text, Imageタグなどに適宜置き換えましょう
cssをreact native用に書き換える
react-native-cssという便利なライブラリがあるので使用
ただ実行するとまたもや以下のエラーが
ReferenceError: Unknown plugin "transform-runtime" specified xxx
ここを参考に
rm -rf ./node_modules/react-native-css/.babelrc
を実施したらうまくいった
class名をstyleに移す際に、BEM形式だとmodifierのハイフンはreact naitive的にはNGになるのでアンダースコア二つなど適宜置き換える必要があります