此文是我的出版书籍《React Native 精解与实战》连载分享此书由机械工业出版社出版书中详解了 React Native 框架底层原理、React Native 组件布局、组件与 API 的介绍与代码实战以及 React Native 与 iOS、Android 平台的混合开发底层原理讲解与代码实战演示精选了大量实例代码方便读者快速学习。书籍还配套了视频教程「80 节实战课精通 React Native 开发」此视频课程建议配合书籍学习书籍中原理性的东西讲解的比较清晰而视频教程对于组件、API 等部分的代码实战开发讲解比较直观。书籍相关所有资料请访问http://rn.parryqiu.com本章将介绍在开发前的一些准备工作包括 iOS 和 Android 的开发与调试环境的搭建并对 React Native 中的一些调试属性做一些说明介绍 Chrome 远程调试代码的技巧以及 React Developer Tools 工具的安装与应用。5.1 配置 iOS 开发环境首先我们需要配置 iOS 平台的开发环境只可以在 Mac 系统下进行 iOS 平台应用的开发Apple 为开发者提供了非常易用、强大、环境整合的开发工具 Xcode用于开发基于 iPhone、iPad、Apple Watch 以及 Mac 平台的应用程序。Xcode 开发工具提供了开发、测试、打包以及整个项目发布上架的功能这些操作都可以在 Xcode 中完成是 Mac 下真正的一站式开发工具。下面介绍并演示 iOS 开发环境的基本安装与运行项目进行调试的过程。打开 App Store 搜索 Xcode点击安装后等待下载完毕并自动完成安装如图 5-1 所示。图 5-1 Xcode 的安装使用 Xcode 打开项目这里我们直接打开课程配套源码文件夹中的 02-02-02 文件夹此项目为本书第二章中建立的初始化项目找到文件夹中的 /HelloReact/ios/HelloReact.xcodeproj 打开xcodeproj 后缀的文件为 Xcode 的项目文件如图 5-2 所示。图 5-2 使用 Xcode 打开 iOS 项目选择对应的模拟器后点击运行按钮即可启动项目首先 React Native 会启动一个 React Packager 用于将源码打包成 bundle js 文件并用于后期调试时的 Live Reload 以及 Hot Reloading 使用如图 5-3 所示。在 JavaScript 打包完成后模拟器会自动启动并自动运行对应的 App如图 5-4 所示。图 5-3 React Packager 控制台图 5-4 选择模拟器并运行项目iOS App 启动后的效果如图 5-5 所示。图 5-5 iOS 项目启动效果修改项目 App.js 源码中的第 6 行代码从初始化项目中的 Welcome to React Native 修改成 Hello React Native保存后并在模拟器中使用快捷键 Command R 进行刷新React Packager 控制台会自动重新打包iOS App 界面立即进行了自动刷新如图 5-6 与 图 5-7所示。1. export default class App extends Component{} { 2. render() { 3. return ( 4. View style{styles.container} 5. Text style{styles.welcome} 6. Welcome to React Native! 7. /Text 8. Text style{styles.instructions} 9. To get started, edit App.js 10. /Text 11. Text style{styles.instructions} 12. {instructions} 13. /Text 14. /View 15. ); 16. } 17. }图 5-6 React Packager 自动重新打包图 5-7 App 界面自动刷新5.2 配置 Android 开发环境Android Studio 是一个为 Android 平台开发应用程序的集成开发环境。2013 年 5 月 16 日在Google I/O 上发布可供开发者免费使用。Android Studio 基于 JetBrains IntelliJ IDEA为 Android 开发特殊定制并在 Windows、mac OS 和 Linux 平台上均可运行。Android Studio 的功能非常丰富其主要具备的特点如下可视化布局WYSIWYG 编辑器、实时编码、实时程序界面预览开发者控制台优化提示、协助翻译、来源跟踪、宣传和营销曲线图Beta 版本测试并阶段性展示基于 Gradle 的构建支持Android 特定代码重构和快速修复Lint 提示工具更好地对程序性能、可用性、版本兼容和其他问题进行控制捕捉支持 ProGuard 和应用签名功能基于模板的向导来生成常用的 Android 应用设计和组件自带布局编辑器可让开发者拖放 UI 组件并预览在不同尺寸设备上的 UI 显示效果等等支持构建 Android Wear 应用内置 Google Cloud Platform 支持支持 Google Cloud Messaging 和 App Engine 的集成。下面介绍并演示 Android Studio 开发环境的基本安装与测试运行项目的过程。1.官网下载并安装 Android Studio 开发工具并下载配置好对应的 Java SDK。官网地址为https://developer.android.com/studio/index.html。2.下载并完成安装后打开 Android Studio 找到右侧的 Import project导入 02-02-02 项目文件夹中的 /HelloReact/android/ 文件夹如图 5-8 所示。图 5-8 导入 Android 项目3.在导入 Android 项目后Android Studio 会自动加载对应版本的 Gradle 进行项目的构建此过程根据你的网络状况可能耗时较长。项目自动构建完成后如图 5-9 所示。图 5-9 Android Studio 项目打开4.在项目完成 Gradle 构建后启动 Android Studio 自带的 Android 模拟器并点击启动按钮开始项目的编译并自动完成项目在模拟器中的调试运行。同样此过程 React Native 会自动启动 React Packager 进行源码的打包并供后期调试时的 Live Reload 以及 Hot Reloading 使用。执行过程分别如图 5-10 与 图 5-11 所示。图 5-10 Android 环境下的 React Packager图 5-11 Android 模拟器执行效果
此文是我的出版书籍《React Native 精解与实战》连载分享此书由机械工业出版社出版书中详解了 React Native 框架底层原理、React Native 组件布局、组件与 API 的介绍与代码实战以及 React Native 与 iOS、Android 平台的混合开发底层原理讲解与代码实战演示精选了大量实例代码方便读者快速学习。书籍还配套了视频教程「80 节实战课精通 React Native 开发」此视频课程建议配合书籍学习书籍中原理性的东西讲解的比较清晰而视频教程对于组件、API 等部分的代码实战开发讲解比较直观。书籍相关所有资料请访问http://rn.parryqiu.com本章将介绍在开发前的一些准备工作包括 iOS 和 Android 的开发与调试环境的搭建并对 React Native 中的一些调试属性做一些说明介绍 Chrome 远程调试代码的技巧以及 React Developer Tools 工具的安装与应用。5.1 配置 iOS 开发环境首先我们需要配置 iOS 平台的开发环境只可以在 Mac 系统下进行 iOS 平台应用的开发Apple 为开发者提供了非常易用、强大、环境整合的开发工具 Xcode用于开发基于 iPhone、iPad、Apple Watch 以及 Mac 平台的应用程序。Xcode 开发工具提供了开发、测试、打包以及整个项目发布上架的功能这些操作都可以在 Xcode 中完成是 Mac 下真正的一站式开发工具。下面介绍并演示 iOS 开发环境的基本安装与运行项目进行调试的过程。打开 App Store 搜索 Xcode点击安装后等待下载完毕并自动完成安装如图 5-1 所示。图 5-1 Xcode 的安装使用 Xcode 打开项目这里我们直接打开课程配套源码文件夹中的 02-02-02 文件夹此项目为本书第二章中建立的初始化项目找到文件夹中的 /HelloReact/ios/HelloReact.xcodeproj 打开xcodeproj 后缀的文件为 Xcode 的项目文件如图 5-2 所示。图 5-2 使用 Xcode 打开 iOS 项目选择对应的模拟器后点击运行按钮即可启动项目首先 React Native 会启动一个 React Packager 用于将源码打包成 bundle js 文件并用于后期调试时的 Live Reload 以及 Hot Reloading 使用如图 5-3 所示。在 JavaScript 打包完成后模拟器会自动启动并自动运行对应的 App如图 5-4 所示。图 5-3 React Packager 控制台图 5-4 选择模拟器并运行项目iOS App 启动后的效果如图 5-5 所示。图 5-5 iOS 项目启动效果修改项目 App.js 源码中的第 6 行代码从初始化项目中的 Welcome to React Native 修改成 Hello React Native保存后并在模拟器中使用快捷键 Command R 进行刷新React Packager 控制台会自动重新打包iOS App 界面立即进行了自动刷新如图 5-6 与 图 5-7所示。1. export default class App extends Component{} { 2. render() { 3. return ( 4. View style{styles.container} 5. Text style{styles.welcome} 6. Welcome to React Native! 7. /Text 8. Text style{styles.instructions} 9. To get started, edit App.js 10. /Text 11. Text style{styles.instructions} 12. {instructions} 13. /Text 14. /View 15. ); 16. } 17. }图 5-6 React Packager 自动重新打包图 5-7 App 界面自动刷新5.2 配置 Android 开发环境Android Studio 是一个为 Android 平台开发应用程序的集成开发环境。2013 年 5 月 16 日在Google I/O 上发布可供开发者免费使用。Android Studio 基于 JetBrains IntelliJ IDEA为 Android 开发特殊定制并在 Windows、mac OS 和 Linux 平台上均可运行。Android Studio 的功能非常丰富其主要具备的特点如下可视化布局WYSIWYG 编辑器、实时编码、实时程序界面预览开发者控制台优化提示、协助翻译、来源跟踪、宣传和营销曲线图Beta 版本测试并阶段性展示基于 Gradle 的构建支持Android 特定代码重构和快速修复Lint 提示工具更好地对程序性能、可用性、版本兼容和其他问题进行控制捕捉支持 ProGuard 和应用签名功能基于模板的向导来生成常用的 Android 应用设计和组件自带布局编辑器可让开发者拖放 UI 组件并预览在不同尺寸设备上的 UI 显示效果等等支持构建 Android Wear 应用内置 Google Cloud Platform 支持支持 Google Cloud Messaging 和 App Engine 的集成。下面介绍并演示 Android Studio 开发环境的基本安装与测试运行项目的过程。1.官网下载并安装 Android Studio 开发工具并下载配置好对应的 Java SDK。官网地址为https://developer.android.com/studio/index.html。2.下载并完成安装后打开 Android Studio 找到右侧的 Import project导入 02-02-02 项目文件夹中的 /HelloReact/android/ 文件夹如图 5-8 所示。图 5-8 导入 Android 项目3.在导入 Android 项目后Android Studio 会自动加载对应版本的 Gradle 进行项目的构建此过程根据你的网络状况可能耗时较长。项目自动构建完成后如图 5-9 所示。图 5-9 Android Studio 项目打开4.在项目完成 Gradle 构建后启动 Android Studio 自带的 Android 模拟器并点击启动按钮开始项目的编译并自动完成项目在模拟器中的调试运行。同样此过程 React Native 会自动启动 React Packager 进行源码的打包并供后期调试时的 Live Reload 以及 Hot Reloading 使用。执行过程分别如图 5-10 与 图 5-11 所示。图 5-10 Android 环境下的 React Packager图 5-11 Android 模拟器执行效果
