主要參考 https://reactnative.cn/docs/getting-started.html react-native中文網
IOS版
1、Node v10以上、Watchman 和 React Native 命令行工具以及 Xcode
先安裝brew工具,這樣便於后面安裝,第一次安裝可能比較慢,耐心等待。。。
ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" 安裝完之后,由於默認使用了國外鏡像源,速度較慢,得修改源地址為國內的。
1)替換brew.git cd "$(brew --repo)" git remote set-url origin https://mirrors.ustc.edu.cn/brew.git
2)替換homebrew-core.git cd "$(brew --repo)/Library/Taps/homebrew/homebrew-core" git remote set-url origin https://mirrors.ustc.edu.cn/homebrew-core.git
安裝node
brew install node 這里可能會提示要你按照依賴包,按照所給出的提示安裝即可
安裝watchman
brew install watchman
同樣也修改鏡像地址 npm config set registry https://registry.npm.taobao.org
--global npm config set disturl https://npm.taobao.org/dist --global
2、 React Native 的命令行工具(react-native-cli),Yarn是 Facebook 提供的替代 npm 的工具,安裝完 yarn 之后就可以用 yarn 代替 npm 了,例如用yarn
代替npm install
命令,用yarn add 某第三方庫名
代替npm install 某第三方庫名
npm install -g yarn react-native-cli
修改鏡像地址
yarn config set registry https://registry.npm.taobao.org--global yarn config set disturl https://npm.taobao.org/dist --global
3、React Native 目前需要Xcode 9.4 或更高版本,APP Store下載即可
4、初始化項目
react-native init AwesomeProject
5、編譯並運行 React Native 應用
cd AwesomeProject react-native run-ios
注意: 此步驟可能會提示xcrun: error: unable to find utility "instruments", not a developer tool or in PATH錯誤, 解決方法: 1、sudo xcode-select -s /Applications/Xcode.app/Contents/Developer/ 命令即可解決此問題 可能會提示Could not find iPhone 6 simulator-- 解決方法: 1、react-native run-ios --simulator="iPhone 6",運行時指定啟動版本 2 、打開項目文件node_modules/react-native/local-cli/runIOS/findMatchingSimulator.js 然后,Check if your device version is correct, e.g: in line 29 console.log(version) 。在文件30行,對比是否是這個條件:Compare it with condition in line 30: if (version.indexOf('iOS') !== 0) { 注釋掉的是version.indexOf('iOS') !== 0,然后替換成 if (version.indexOf('iOS') !== 0 && !version.includes('iOS')) { continue; }
6、 再重新執行react-native run-ios --simulator="iPhone 6" 命令,如果成功就可以看到手機模擬運行的效果了
android版
1、下載adroid studio https://developer.android.google.cn/studio/
2、按照https://reactnative.cn/docs/getting-started.html上面給出的安裝步驟依次操作即可,上面說是要翻牆,但好像不翻也可以!!!
需要注意的地方是在運行項目的時候,得先新建模擬器,不然在react-native run-android執行時,
會出現installDebug FAILED,網上說修改gradle版本,還有改distributionURL參數。本人都沒改,在Android studio 新建好模擬器即可!!!
至此,以上就是本人在Mac 10.14.6 搭建react-native的過程及其過程中所遇到的問題,給小伙伴們提供個參考吧。