阅读 199

搭建 React Native 开发环境

概述

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

1. 基础环境搭建

  • 安装 Node.js

  • 安装 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)
  • JDK 的版本必须是 1.8(1.8 版本,官方也直接称 8 版本)
    • 目前不支持高于 1.8 的JDK版本
  • 下载时要求登录(请先注册 Oracle 账号)
  • 安装 JDK (一直下一步)
    • 命令行中输入 java -version,验证安装是否成功

2. 安装 Android Studio

  • 下载 Android Studio
  • 安装(一直下一步)
  • 启动 Android Studio
    • 初次启动,需要安装组件(组件约 2 GB,安装后占用空间约 8 GB)
    • 安装组件的过程巨长,要有耐心
  • 创建项目

image.png

image.png

3. 安装 Android SDK

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

image.png

image.png

4. 配置环境变量

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

查看 Android SDK 安装的路径:

image.png

配置环境变量:

image.png

image.png

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

image.png

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
    1. 安装 VS Code 插件
    • ES7 React/Redux/GraphQL/React-Native snippets
      • 快捷命令:rnc (react native class)
      • 快捷命令:rnf (react native function)
    1. 调试工具
    • 模拟器调试
      • 模拟器是安装在电脑上的,虚拟的手机界面
      • 模拟器一般跟随Android Studio 和 Xcode 一起安装
      • 启动应用,模拟器会一起启动
    • 真机调试
      • 打开 USB 调试模式
      • 通过 USB 先将电脑和手机连起来
      • 启动应用,在手机上安装应用

模拟器调试:

  • 点击模拟器(使模拟器获取焦点)
  • 快捷键 ctrl + m
  • 点击 debug
  • 自动跳转到浏览器
文章分类
前端