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 版本 再试试，弄清执行顺序、基本能够解决问题

若是依然不能够，请尝试以下同款操做：