Help us understand the problem. What is going on with this article?

React Nativeのインストールとweb版からの移植ではまったこと

More than 1 year has passed since last update.

今回流行りの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になるのでアンダースコア二つなど適宜置き換える必要があります

kone
ずっとバックエンドやってきましたが最近はフロントエンドも。ReactやReact Native、Electron、テスト周りとデータサイエンスに興味あり。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした