mac+react-native环境搭建

主要参考 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的过程及其过程中所遇到的问题，给小伙伴们提供个参考吧。

mac+react-native环境搭建

5、编译并运行 React Native 应用

猜你喜欢