React Native 的优势
- 开发体验好
- 用统一的代码规范开发移动端程序，不用关注移动端的差异
- 开发成本低
- 开发一次，可以生成 Android 和 iOS 两个系统上的 App
- Learn once, write anywhere
- 学习成本低
- 只要掌握 JavaScript 和 React，就可以进行移动端开发了
基础环境搭建
- 安装 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
搭建安卓环境
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（一直 “下一步”）
- 启动 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_HOME 相关的环境变量
- %ANDROID_HOME%\platform-tools
- %ANDROID_HOME%\emulator
- %ANDROID_HOME%\tools
- %ANDROID_HOME%\tools\bin
搭建 IOS 环境
- 安装 Watchman
brew install watchman
- 安装 Xcode
- 安装 CocoaPods
初始化项目
react-native init myproject
- 进入项目
- cd myproject
- 运行项目
- Android
- yarn android
- iOS
- cd ios && pod install && cd ../
- yarn ios
- Android
好用的 VSCODE 插件
调试工具
-
模拟器调试
- 模拟器是安装在电脑上的，虚拟的手机界面
- 模拟器一般跟随 Android Studio 和 Xcode 一起安装
- 启动应用，模拟器会一起启动
-
具体方式
- 点击模拟器（使模拟器获取焦点）
- 快捷键 ctrl+m
- 点选 debug
- 自动跳转到浏览器
- 真机调试
- 打开 USB 调试模式
- 通过 USB 线将电脑和手机连起来
- 启动应用，在手机上安装应用
