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 版本 再試試，弄清執行順序、基本能夠解決問題

若是依然不能夠，請嘗試以下同款操做：