react native 的初次嘗試之環境搭建 Mac ios

boxser發表於2019-04-02

基礎環境

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
複製程式碼

當你看到如圖：