Mac下React Native安装

1. 安装Homebrew

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

中间安装会提示安装CML

==> Downloading and installing Homebrew...
remote: Enumerating objects: 115218, done.
error: RPC failed; curl 18 transfer closed with outstanding read data remaining
fatal: The remote end hung up unexpectedly
fatal: early EOF
fatal: index-pack failed
Failed during: git fetch origin
master:refs/remotes/origin/master --tags --force

解决办法：
使用国内镜像进行安装。

curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install >> brew_install

修改brew_install，用#注释原来的BREW_REPO和CORE_TAP_REPO：

#BREW_REPO = "https://github.com/Homebrew/brew".freeze
#CORE_TAP_REPO = "https://github.com/Homebrew/homebrew-core".freeze
BREW_REPO = "git://mirrors.ustc.edu.cn/brew.git".freeze
CORE_TAP_REPO = "git://mirrors.ustc.edu.cn/homebrew-core.git".freeze

执行：

/usr/bin/ruby ./brew_install

2.安装Node 和 Watchman

brew install node
brew install watchman

3.设置nmp的国内镜像

npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global

4.安装Yarn、React Native 的命令行工具

npm install -g yarn react-native-cli

5.设置Yarn的国内镜像

yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global

安装完 yarn 之后就可以用 yarn 代替 npm 了，例如用yarn代替npm install命令，用yarn add 某第三方库名代替npm install 某第三方库名

6.创建新项目

react-native init testProject

7.运行项目

cd testProject
react-native run-ios

8.开发工具webstorm的安装

http://idea.lanyus.com/

参考资料：

https://blog.csdn.net/voke_/article/details/76418116

9.android模拟器运行

cd 项目文件夹
react-native run-android

报错：

JS server already running.
Building and installing the app on the device (cd android && ./gradlew installDebug)...
FAILURE: Build failed with an exception.

• What went wrong:
  A problem occurred configuring project ':app'.
  SDK location not found. Define location with sdk.dir in the local.properties file or with an ANDROID_HOME environment variable.
• Try:
  Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.
• Get more help at https://help.gradle.org
  BUILD FAILED in 1s
  Could not install the app on the device, read the error above for details.
Make sure you have an Android emulator running or a device connected and have set up your Android development environment:
https://facebook.github.io/react-native/docs/getting-started.html

查看configure->SDK Manager：

配置环境变量：

vi ~/.bash_profile

export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
export PATH=$PATH:$ANDROID_HOME/emulator

source ~/.bash_profile

启动模拟器：

再次执行：

react-native run-android

10.gradle配置
执行：

./gradlew :Examples:UIExplorer:android:app:installDebug

报错：

Configure project :ReactAndroid
Project evaluation failed including an error in afterEvaluate {}. Run with --stacktrace for details of the afterEvaluate {} error.
FAILURE: Build failed with an exception.

• Where:
  Build file '/Users/mymac/AllMe/react-native/ReactAndroid/build.gradle' line: 208
• What went wrong:
  A problem occurred evaluating project ':ReactAndroid'.
  Cannot get property 'absolutePath' on null object
• Try:
  Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.
• Get more help at https://help.gradle.org
  BUILD FAILED in 33s

或者如下修改：

推荐阅读android studio配置相关文章：

https://www.jianshu.com/p/d91a2ea3e248
https://blog.csdn.net/weixin_42128166/article/details/80184765
https://www.jianshu.com/p/84cdc88ce775
https://blog.csdn.net/dream_an/article/details/53787183
https://blog.csdn.net/qq_22494029/article/details/79079918