【基础篇】ReactNative 开发环境搭建及第一个程序运行

公共基础环境搭建

IOS 开发环境搭建

Android 开发环境搭建

第一个 ReactNative 项目

公共基础环境搭建

安装 Node 和 Watchman
- Node 安装可以有多种方式，可以去官网下载进行安装；也可以使用 homebrew 安装，或者使用 nvm 安装， Node 版本必须是 v10 或者以上的版本
- Watchman 可以使用 homebrew 安装，Watchman 是 Facebook 提供的监控文件系统变更的工具，安装此工具可以提高开发性能
- homebrew 安装命令
- ```
brew install node
brew install watchman
```
安装 Yarn
- 可以使用 npm 安装，也可以去官网下载安装(Windows 系统) 或使用命令行安装
- ```
# npm 安装
npm install -g yarn
# 命令行安装
brew install yarn
```

IOS 开发环境搭建

安装 XCode
- 需要 XCode 版本为 10 或者更高版本，可以在 App Store 中安装或者去 Apple 开发者官网 下载安装
- 安装成功后，需要配置 XCode 的命令行工具
- 启动 XCode，打开 Preferences 下的 Locations, 选择一个 Command Line Tools，如图所示：

Android 开发环境搭建

安装 JDK 8(目前不支持更高版本)
- 在 Oracle 官网下载即可，此处需要注意，如果不是下载最新版本，则必须登录后才可以下载
- 下载完成后直接安装即可， Windows 系统可能还需要配置环境变量
安装 Android Studio
- 如果可以科学上网，则可以直接去Android Studio 官网下载并进行安装
- 如果不能访问官网，则可以通过Android Studio 中文社区进行下载
- 下载完成后进行安装，之后打开进行SDK和AVD的相关配置
- 启动 Android Studio，打开 Preferences 找到 Android SDK
- 首先选择 SDK Platforms 选项，在界面右下角的位置处，勾选 Show Package Details 选项，然后在中间的 SDK 版本中找到 Android 9.0(Pie)，选择其下边所有的选项
- 然后选择 SDK Tools 选项，选择下边所有的工具
- 最后点击 Apply 进行安装，此过程有点漫长，需要耐心等待。安装完成后点击 Finish 完成，点击 OK 保存，这样 SDK 安装完成
配置 Android 模拟器
- 启动 Android Studio，打开 AVD Manager, 创建一个 Android 模拟器并启动即可。 注意：创建模拟器时也选择 Android 9.0，这样可能会避免一些不必要的麻烦

配置 SDK 环境变量

将如下配置添加到用户根目录下的.bashrc或者.zshrc等类似的终端配置文件下；或者一步到位直接添加到 /etc/profile 文件中，然后重启系统

# 此处的 ANDROID_HOME 是 SDK 的存放目录
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

第一个 ReactNative 项目

创建项目
- 如果你之前全局安装过旧的 react-native-cli 命令行工具，请使用 npm uninstall -g react-native-cli 卸载掉它以避免一些冲突
- 使用 npx 命令创建项目(安装完 Node 之后自带的)
- ```
# ProjectName 指的是项目名称
npx react-native init ProjectName
```
- 创建项目耗时可能比较长，耐心等待创建完成即可，如果出错，建议将 npm 的镜像源改为淘宝的镜像源
编译并运行项目
- 进入到项目目录，使用 VSCode 打开项目代码，查看 package.json 文件；可以看到 scripts 中为我们提供了一些命令让我们使用
- ```
"scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
},
```
- 接下来我们开始运行项目；先启动服务，然后运行对于平台的项目
  - 运行 IOS
    - ```
    yarn start
    yarn ios
```
- 运行 Android
  - ```
  yarn start
  yarn android
```
- 系统会自动打开模拟器，并进行项目的编译最终打包运行到模拟器上
- 接下来我们看一下运行效果图：