React Native 环境搭建

其实早就应该学习 React Native 了，但是一直拖着，一拖就拖到了现在，好在现在有时间好好学习下，一下就是我搭建环境的过程，看起来和之前的 Cordova 很像，简单的介绍就不说了，网上有很多详细的资料。

1. 安装 Node，先通过 node -v 命令查看电脑是否安装过 Node。如果未安装过使用以下命令进行安装：$ brew install node。

2. 安装 watchman，执行命令 $ brew install watchman。

在我安装Watchman的时候遇到两个问题，两个是警告，一个是警告：
Warning: libusbmuxd is outdated!
To avoid broken installations, as soon as possible please run:
brew upgrade // 指的是更新所有包
Or, if you're OK with a less reliable fix:
brew upgrade libusbmuxd //指的是更新指定包
首先我想解决warning：brew upgrade或brew upgrade libusbmuxd

第二个警告：
Warning: Building python from source:
The bottle needs the Apple Command Line Tools to be installed.
You can install them, if desired, with:
xcode-select --install
当我使用命令安装 Command Line Tools的时候提示我软件不能下载，因为网络出现错误，所以去苹果官方去下载了安装包进行的安装：
前往https://developer.apple.com/download/more下载xcode command line tools(需要登录AppleID)

错误是：
Error: An exception occurred within a child process:
DownloadError: Failed to download resource "python"
Download failed: https://www.python.org/ftp/python/3.7.7/Python-3.7.7.tar.xz
解决完两个warning之后重新安装watchman，提示安装成功了。此错误也就没了

3. 查看并设置npm镜像

$ npm config get registry //查看镜像
// 设置镜像
$ 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

执行报错：

15857530015366.jpg

更新 OpenSSL教程： https://www.jianshu.com/p/32f068922baf
Homebrew 国内镜像源教程：https://zhuanlan.zhihu.com/p/102760018

• 这里一直有一个warning是版本太低，是我执行安装React Native命令的时候的问题，可能是官方支持的版本只是0.5.4？这里暂时只是个猜测，也可以找到路径手动修改mkdirp的版本，但是不太清除会有什么影响，手动修改路径在/usr/local/lib/node_modules/react-native-cli/node_modules路径下
• 第二个错误也是因为没有写入权限的问题，执行sudo 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

6. 创建项目

$ react-native init AwesomeProject // 或者使用npx react-native init

// cd到项目路径
$ cd /Users/XXX/AwesomeProject
// 命令运行模拟器
$ react-native run-ios  // 或者使用npx react-native run-ios

15857943588622.jpg

15857943974814.jpg

到这里React Native环境搭建，重新创建一个新项目就到此为止了，更多的可以参考React Native中文网，集成到现有项目点这里。