文檔地址： https://reactnative.cn/docs/getting-started/

一.macOS iOS 安裝

1.切換Homebrew國(guó)內(nèi)鏡像源 （暫時(shí)不推薦用了，國(guó)內(nèi)鏡像最新才9.11.1）

替換brew.git:

cd "$(brew --repo)"

git remote set-url origin [https://mirrors.ustc.edu.cn/brew.git](https://mirrors.ustc.edu.cn/brew.git)

//替換homebrew-core.git:

cd "$(brew --repo)/Library/Taps/homebrew/homebrew-core"

git remote set-url origin [https://mirrors.ustc.edu.cn/homebrew-core.git](https://mirrors.ustc.edu.cn/homebrew-core.git)

echo "export HOMEBREW_BOTTLE_DOMAIN=[https://mirrors.ustc.edu.cn/homebrew-bottles](https://mirrors.ustc.edu.cn/homebrew-bottles)">>~/.profile

source ~/.profile

下面是還原

重置brew.git:

cd "$(brew --repo)"

git remote set-url origin [https://github.com/Homebrew/brew.git](https://github.com/Homebrew/brew.git)

重置homebrew-core.git:

cd "$(brew --repo)/Library/Taps/homebrew/homebrew-core"

git remote set-url origin [https://github.com/Homebrew/homebrew-core.git](https://github.com/Homebrew/homebrew-core.git)

2.brew install node

大概要半個(gè)小時(shí)

3.brew install watchman

大概也要半小時(shí)

報(bào)如下錯(cuò)誤

image.png

下載最新的xcode10.2后

image.png

接著按錯(cuò)誤提示安裝
xcode-select --install
最后在安裝一遍
brew install watchman
報(bào)權(quán)限不夠錯(cuò)誤

image.png

image.png

解決：

sudo chown -R $(whoami) /usr/local/* 

[https://stackoverflow.com/questions/46459152/cant-chown-usr-local-for-homebrew-in-mac-os-x-10-13-high-sierra]

image.png

4.接下來(lái)設(shè)置鏡像，在安裝其他命令

npm config set registry https://registry.npm.taobao.org —global
npm config set disturl https://npm.taobao.org/dist —global
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

image.png

5.創(chuàng)建項(xiàng)目
cd /Users/mac/Documents/wangyu/pzworkspace/reactIOSProject
//5.1初始化
react-native init AwesomeProject
報(bào)錯(cuò)了

image.png

有可能是翻墻導(dǎo)致顷链，（因?yàn)殓R像都設(shè)成淘寶了）關(guān)閉在試 不行
仔細(xì)看了下錯(cuò)誤家乘，感覺(jué)node版本比較老導(dǎo)致 目前支持6 和 8開(kāi)頭版本，以及10以上版本

image.png

感覺(jué)被國(guó)內(nèi)鏡像給坑了泵督，homeBrew 鏡像還原成國(guó)外的(注意全局命令export 也注釋掉)司草，在翻墻更新node

brew upate node

如果不擔(dān)心沖突也可以直接官網(wǎng)下載最新的node https://nodejs.org/en/

image.png

npm config set registry https://registry.npm.taobao.org —global
npm config set disturl https://npm.taobao.org/dist —global
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

最后在init

react-native init AwesomeProject

成功了：

image.png

//5.2運(yùn)行
cd AwesomeProject
react-native run-ios

image.png

按順序執(zhí)行如下命令 (不要?jiǎng)h除原來(lái)工程文件)

cd /Users/mac/Documents/wangyu/pzworkspace/reactIOSProject/AwesomeProject

rm -rf node_modules && yarn cache clean

yarn install

rm -rf ~/.rncache

/Users/mac/Documents/wangyu/pzworkspace/reactIOSProject/AwesomeProject/node_modules/react-native/scripts/ios-install-third-party.sh
最后 還是報(bào)如下錯(cuò)誤
react-native run-ios
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 AwesomeProject.xcodeproj

image.png

原因是端口被nignx占用了
lsof -i:8081

image.png

cd /Users/mac/Documents/wangyu/pzworkspace/reactIOSProject/AwesomeProject

image.png

2.修改xcode工程所有8081代碼 還有下圖這個(gè)地方 參考https://blog.csdn.net/weixin_33871366/article/details/90924912

image.png

image.png

image.png

4.由于每次init項(xiàng)目都要修改端口没陡，我就把nignx的端口改成8082了
之后 就可以正常運(yùn)行了

react-native init FirstProjcet
cd FirstProject
react-native run-ios

image.png

二.andorid環(huán)境搭建

1.Android Studio 官網(wǎng)下載

https://developer.android.com/studio

2.jdk官網(wǎng)

https://www.oracle.com/technetwork/java/javase/downloads/jdk12-downloads-5295953.html

3.Android Studio 設(shè)置

android SDK 下載

/Users/mac/Library/Android/sdk

image.png

4.設(shè)置 環(huán)境變量

echo "export ANDROID_HOME=~/Library/Android/sdk">>~/.profile
echo "export PATH=$PATH:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools">>~/.profile
source ~/.profile

5.嘗試

cd /Users/mac/Documents/wangyu/pzworkspace/reactIOSProject/FirstProject 
react-native run-android

報(bào)如下錯(cuò)誤說(shuō)明環(huán)境就安裝成功了

image.png

6.創(chuàng)建虛擬設(shè)備 打開(kāi)工具欄選擇這個(gè)創(chuàng)建

image.png

下載好后，還重要配置安裝索赏，安裝后后點(diǎn)擊這個(gè)啟動(dòng)

image.png

react-native run-android

就可以像上面那樣正常顯示了

image.png

如果您發(fā)現(xiàn)本文對(duì)你有所幫助盼玄，如果您認(rèn)為其他人也可能受益，請(qǐng)把它分享出去潜腻。