搭建 React Native 开发环境

概述

1. 基础环境搭建
2. 搭建安卓环境
3. 搭建IOS环境
4. 初始化项目

1. 基础环境搭建

• 安装 Node.js

  • Node.js 的版本应 >=12 (推荐安装 LTS 版本）
  • npm config set registry registry.npm.taobao.org

• 安装 Yarn

  • npm install -g yarn

• 安装 React Native 脚手架

  • npm install -g react-native-cli

以上环境能保证JS代码正常运行，但是最终还需要将JS代码生成两端的APP代码，所以还需要搭建APP对应的环境。Windows下只能搭建Android开发环境，Mac 下既能搭建Android环境又能搭建IOS开发环境，这一点可以在官网上找到答案。

2. 搭建安卓环境

1. 安装 JDK：JDK是Java开发的一个套件，Android应用要跑在Java环境上
2. 安装 Android Studio：保证安卓能正常运行的环境，同时也是一款编辑器，安卓工程师使用它进行代码开发。这里安装 Android Studio主要是为了安装 Android SDK
3. 安装 Android SDK：安卓开发需要用到的一些套件
4. 配置环境变量

1.安装 JDK

• 下载 JDK（Java SE Development Kit）
  • www.oracle.com/java/techno…
• JDK 的版本必须是 1.8（1.8 版本，官方也直接称 8 版本）
  • 目前不支持高于 1.8 的JDK版本
• 下载时要求登录（请先注册 Oracle 账号）
• 安装 JDK （一直下一步）
  • 命令行中输入 java -version，验证安装是否成功

2. 安装 Android Studio

• 下载 Android Studio
  • developer.android.com/studio/inde…
• 安装（一直下一步）
• 启动 Android Studio
  • 初次启动，需要安装组件（组件约 2 GB，安装后占用空间约 8 GB）
  • 安装组件的过程巨长，要有耐心
• 创建项目

3. 安装 Android SDK

• What
  • Android SDK 是针对安卓开发的套件
• Why
  • 虽然 Android Studio 默认会安装最新版本的 Android SDK，但是目前编译 React Native 应用需要的是 Android 10（Q）版本的SDK
• How
  • 打开 Android Studio，在菜单 Tools 下找到 “SDK Manager”

4. 配置环境变量

• 配置 ANDROID_HOME 环境变量
  • 打开 Android Studio，点击菜单 Tools -> SDK Manager，找到 Appearance & Behavior -> System Settings -> Android SDK

查看 Android SDK 安装的路径：

配置环境变量：

• 跟 ANDROID_HOME 相关的环境变量
  • %ANDROID_HOME%\platform-tools
  • %ANDROID_HOME%\emulator
  • %ANDROID_HOME%\tools
  • %ANDROID_HOME%\tools\bin

3. 搭建IOS环境

1. 安装 Watchman: 监控文件变化
2. 安装 Xcode：用来开发IOS/MAc应用
3. 安装 CocoaPods：IOS/MAC项目的依赖管理工具，类似于Node.js的npm

• Watchman
  • brew install watchman
• Xcode
  • React Native 目前需要 Xcode 10 或更高版本。可以通过 App Store 下载
• CocoaPods
  • brew install cocoapods

4. 初始化项目

1. 创建项目
2. 安装 VS Code 插件
3. 调试工具

• 1. 创建项目
  • 初始化项目 react-native init myproject
  • 进入项目 cd myproject
  • 运行项目
    • Android：yarn android
    • IOS：
      • cd ios && pod install && cd ../
      • yarn ios
• 2. 安装 VS Code 插件
  • ES7 React/Redux/GraphQL/React-Native snippets
    • 快捷命令：rnc (react native class)
    • 快捷命令：rnf (react native function)
• 3. 调试工具
  • 模拟器调试
    • 模拟器是安装在电脑上的，虚拟的手机界面
    • 模拟器一般跟随Android Studio 和 Xcode 一起安装
    • 启动应用，模拟器会一起启动
  • 真机调试
    • 打开 USB 调试模式
    • 通过 USB 先将电脑和手机连起来
    • 启动应用，在手机上安装应用 模拟器调试：
• 点击模拟器（使模拟器获取焦点）
• 快捷键 ctrl + m
• 点击 debug
• 自动跳转到浏览器