react native 的初次尝试之环境搭建 Mac ios

基础环境

OS X: v10.14.1
Xcode: v10.1(10B61)
Node: v10.15.3
Npm: v6.4.1
Yarn: v1.15.2
Watchman: v4.7.0
React-native-cli: v2.x
React: v16.8.3
React-native: v0.59.2
复制代码

Please keep Node version > v8.3 && !v9.x

根据官网提示设置 yarn 或 npm 镜像源全局 registry.npm.taobao.org ，切忌 cnpm.xxx

常见问题分析

运行 react-native run-ios 可能报错:

Error: Command failed: /usr/libexec/PlistBuddy -c Print:CFBundleIdentifier build/Build/Products/Debug-iphonesimulator/AwesomeProject.app/Info.plist
Print: Entry, ":CFBundleIdentifier", Does Not Exist
复制代码

解决方案：该issue里专门针对这种错误，提供方法一堆，总有一款适合你 github.com/facebook/re…

我尝试了大部分，但还是失败了 !

如果启动后遇到如图：

一定要耐心等待，不可中止！初次 run-ios 可能要10 - 30分钟，有大于2G的内容要下载，然后你可能会看到 simulator 模拟器自动启动，来到手机首页 却迟迟不动的情况。耐心等待 上图俩窗口程序执行完毕。

正常情况下，以上程序执行完毕，白色窗口持续监听本地代码，模拟器自动打开当前项目并显示。

两个窗口都有可能报不同的错误：

入图，Permission denied，确保当前系统用户拥有该项目的所有文件权限：

sudo chmod -R 777 AwesomeProject[项目目录]

似乎没用、并没有拿到node_modules 等内部文件夹的权限，于是使用： sudo -s && sudo chmod -R 777 AwesomeProject[项目目录] 干脆拿 root 用户来操作就可以了

模拟器无法启动问题

一般是开发者手动退出模拟器，而模拟器进程依然在运行，导致模拟器无法再次打开产生的问题，你需要手动结束进程：

lsof -n -i4TCP:8081  // 查看项目端口下的相关进程，
kill -9 [your pid]   // 结束相关进程

也可以执行
rm -rf ~/Library/Developer/CoreSimulator/Devices //删除模拟器已加载的设备 如 iOS 12.1 系统等等
killall -9 com.apple.CoreSimulator.CoreSimulatorService  //结束模拟器进程
复制代码

模拟器启动后无任何反应

等待终端程序执行完成后，模拟器依然无反应，可查看模拟器桌面是否有你的项目，如图：

情况一：

手动点击打开即可

情况二：

opendir(/Users/gokuai/Documents/hobby/AwesomeProject/node_modules/react-native/third-party/glog-0.3.5/conftSpW3r) -> Permission denied. Marking this portion of the tree deleted
To clear this warning, run:
`watchman watch-del /Users/gokuai/Documents/hobby/AwesomeProject ; watchman watch-project /Users/gokuai/Documents/hobby/AwesomeProject`
Loading dependency graph, done.
复制代码

终端叫你干嘛执行一下试试先：

//注意自己PC的路径
~: watchman watch-del /Users/gokuai/Documents/hobby/AwesomeProject
复制代码

可能还会发现：

Runtime is not ready for debugging. Mkae sure Packager server is running.
复制代码

参考 github.com/facebook/re…

@jsina commented on 27 Jul 2018 这一条回答

//我就直接执行如下
$: export NODE_BINARY=node
S: react-native bundle --entry-file='index.js' --bundle-output='./ios/main.jsbundle' --dev=false --platform='ios' --assets-dest='./ios'
复制代码

然后打开模拟器项目 cmd + R 即可

模拟器不更新代码的问题

无论如何刷新 cmd+R cmd+D 都无法让模拟器刷新代码，请尝试：

打开并开启模拟器 Hardware => keyboard => Connect Hardware Keyboard ，确保网络同步。

模拟器打开后项目报错

No bundle URL present.
Make sure you're running a packager server or have inclouded a .jsboundle file in your application bundle.
复制代码

如图：

其它错误

error Failed to build iOS project. We ran "xcodebuild" command but it exited with error code 65.
To debug build logs further, consider building your app with Xcode.app,by opening reactApp.xcodeproj
复制代码

• 用 xcode 打开当前项目
• 选择 File => Project Setting => Advanced => Custom => Relative to workspace => done => done
• rm -rf node_modules
• killall -9 com.apple.CoreSimulator.CoreSimulatorService
• sudo react-native run-ios

再比如：

info ** BUILD SUCCEEDED **
info Installing build/AwesomeProject/Build/Products/Debug-iphonesimulator/AwesomeProject.app
An error was encountered processing the command (domain=NSPOSIXErrorDomain, code=2):
lstat of /Users/gokuai/Documents/hobby/AwesomeProject/ios/build/AwesomeProject/Build/Products/Debug-iphonesimulator/AwesomeProject.app failed: No such file or directory
No such file or directory
info Launching org.reactjs.native.example.AwesomeProject
org.reactjs.native.example.AwesomeProject: 29514
复制代码

或者

** BUILD SUCCEEDED ** 
Installing build/AwesomeProject/Build/Products/Debug-iphonesimulator/AwesomeProject.app
Launching org.reactjs.native.example.AwesomeProject
org.reactjs.native.example.AwesomeProject: 29514
复制代码

无非就是

rm -rf ios/build
rm -rf node_modules
react-native upgrade
yarn
lsof -n -i4TCP:8081
kill -9 [your pid]
sudo -s && sudo chmod -R 777 AwesomeProject
sudo react-native run-ios
复制代码

当你看到如图：

说明本地项目文件正被监听和编译。。。

也可以中断它 Ctrl + C ，yarn start 或者 npm start 重新启动就可以和模拟器同步了

综上所述

如果上述情况依然无法解决问题，请再次检查自身环境问题，或者尝试更换 React-native 版本 再试试，弄清执行顺序、基本可以解决问题

如果依然不可以，请尝试如下同款操作：