React Native从0到1：开启跨端开发之旅

最新推荐文章于 2025-07-02 09:34:15 发布

大雨淅淅

最新推荐文章于 2025-07-02 09:34:15 发布

阅读量1.4k

点赞数 19

CC 4.0 BY-SA版权

分类专栏：跨平台文章标签： react native react.js javascript

本文链接：https://blog.youkuaiyun.com/xiaoyingxixi1989/article/details/147464181

3.1 创建第一个 React Native 项目

一、为什么选择 React Native

在移动应用开发的广阔天地里，React Native 就像一颗璀璨的新星，吸引着无数开发者投身其中。它是 Facebook 开源的跨平台移动应用开发框架，问世以来，凭借其独特的魅力，迅速在开发者社区中赢得了广泛的赞誉和应用。

React Native 最吸引人的地方，莫过于它能够让开发者一次编写代码，就能同时在 iOS 和安卓这两大主流移动平台上运行应用。想象一下，以往开发一款同时支持 iOS 和安卓的应用，开发者需要分别用 Swift 或 Objective - C 开发 iOS 版本，用 Java 或 Kotlin 开发安卓版本，不仅工作量巨大，而且维护成本高昂。有了 React Native，情况就大不一样了。开发者可以使用 JavaScript 和 React 来构建应用，大部分代码可以在两个平台间共享，大大减少了重复劳动，开发效率得到了显著提升。

与原生开发相比，React Native 降低了开发成本和难度。原生开发需要开发者熟练掌握不同平台的编程语言和开发工具，学习门槛较高。而对于熟悉 JavaScript 和 React 的开发者来说，学习 React Native 的成本则低得多。这使得更多前端开发者能够轻松涉足移动应用开发领域，为项目注入新鲜血液。

和其他跨平台开发方案，如 Flutter、Weex 等相比，React Native 也有着自己的优势。它拥有庞大且活跃的社区，这意味着开发者在遇到问题时，能轻松从社区中找到丰富的解决方案、教程、开源库和组件。例如，在实现地图功能时，只需在社区中搜索相关的 React Native 地图库，就能快速找到成熟的解决方案并集成到项目中，大大节省了开发时间。

二、开启前的准备

2.1 前置知识储备

在踏上 React Native 的学习之旅前，我们得先把基础打牢。就像盖房子，只有地基稳固，才能建起高楼大厦。首先，HTML 和 CSS 基础是不可或缺的。HTML 负责搭建网页的结构，CSS 则用于美化页面样式，它们是 Web 开发的基石。虽然 React Native 主要用于移动应用开发，但对 HTML 和 CSS 的理解，能帮助我们更好地理解界面布局和元素的呈现方式。比如，在 React Native 中布局组件时，我们可以借鉴 HTML 中关于块级元素和行内元素的概念，以及 CSS 中盒模型的思想，来更准确地控制组件的位置和大小。

扎实的 JavaScript 基础同样至关重要。React Native 是基于 JavaScript 开发的，无论是定义组件、处理用户交互，还是实现各种业务逻辑，都离不开 JavaScript。从变量声明、数据类型，到函数定义、作用域，再到对象、数组的操作，这些基础知识都需要我们熟练掌握。例如，在 React Native 应用中，我们常常需要根据用户的操作来更新界面状态，这就涉及到 JavaScript 中的事件处理机制和状态管理，只有对这些内容了如指掌，才能编写出高效、稳定的代码。

React 基础也是学习 React Native 的必备前提。React Native 借鉴了 React 的核心思想和编程模式，像组件化开发、虚拟 DOM 等概念，在两者中都起着关键作用。理解 React 的组件生命周期，能让我们在 React Native 开发中更好地控制组件的创建、更新和销毁过程。比如，在组件的componentDidMount生命周期函数中，我们可以进行一些初始化操作，如获取数据、设置监听事件等；而在componentWillUnmount函数中，则可以清理一些资源，避免内存泄漏。

ES6 语法在 React Native 开发中也被广泛应用，它为 JavaScript 带来了许多新特性，如箭头函数、类的定义、解构赋值、let和const关键字等。这些特性不仅让代码更加简洁、易读，还提升了开发效率。以箭头函数为例，它简化了函数的定义方式，并且在处理回调函数时，能更好地保留this的指向。在 React Native 中，我们经常会用到箭头函数来定义事件处理函数，让代码看起来更加清爽。

Flex 布局是 React Native 中主要的布局方式，它能帮助我们轻松实现各种灵活的界面布局，适应不同屏幕尺寸和方向。通过设置 Flex 容器和项目的属性，如flexDirection、justifyContent、alignItems等，我们可以精确控制组件的排列方式、对齐方式和尺寸分配。例如，使用flexDirection: 'row'可以让子组件水平排列，而justifyContent: 'center'则能使子组件在主轴上居中对齐，alignItems: 'center'能让子组件在交叉轴上居中对齐，从而实现一个完美居中的布局效果。

2.2 环境搭建

工欲善其事，必先利其器。搭建好 React Native 开发环境，是我们开启开发之旅的第一步。下面分别介绍在 Windows 和 Mac 系统下的环境搭建步骤。

2.2.1 Windows 系统

安装 Node.js：Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时，React Native 依赖它来运行和管理项目。前往No de.js 官网，下载适合你系统的安装包（64 位或 32 位）。下载完成后，双击安装包，按照安装向导的提示，一路点击 “下一步” 即可完成安装。安装完成后，打开命令提示符，输入node -v，如果显示 Node.js 的版本号，说明安装成功。
安装 Yarn：Yarn 是一个快速、可靠、安全的依赖管理工具，它能加速 Node 模块的下载。打开命令提示符，以管理员身份运行以下命令：npm install -g yarn。安装完成后，输入yarn -v，若显示版本号，则安装成功。为了提高下载速度，我们可以将 Yarn 的源设置为淘宝镜像，运行命令：yarn config set registry https://registry.npm.taobao.org。
安装 JDK：React Native 开发安卓应用需要 Java 开发工具包（JDK）的支持。访问Oracle 官网，下载 JDK 安装包（建议选择 Java SE Development Kit 8 及以上版本）。安装时，按照提示选择安装路径，完成后，需要配置环境变量。在 “系统属性” -> “高级” -> “环境变量” 中，新建一个系统变量JAVA_HOME，其值为 JDK 的安装路径，例如C:\Program Files\Java\jdk1.8.0_291。然后，在Path变量中添加%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin;。最后，打开命令提示符，输入java -version，若显示 Java 版本信息，则安装和配置成功。
安装 Android Studio（含 Android SDK）：Android Studio 是官方推荐的安卓应用开发集成开发环境（IDE），它包含了 Android SDK，提供了开发安卓应用所需的各种工具和库。从Android Studio 官网下载安装包，安装过程中，选择自定义安装，可指定安装路径。安装完成后，第一次启动 Android Studio 时，会提示安装 Android SDK，按照提示进行安装即可。安装完成后，还需要配置 Android SDK 的环境变量。在 “系统属性” -> “高级” -> “环境变量” 中，新建一个系统变量ANDROID_HOME，其值为 Android SDK 的安装路径，例如C:\Users\YourUserName\AppData\Local\Android\Sdk。然后，在Path变量中添加%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools;。打开命令提示符，输入adb devices，若显示设备列表，则说明 Android SDK 配置成功。
安装 Python2（可选）：在某些情况下，如运行一些老版本的 React Native 项目时，可能需要 Python2 的支持。前往Python 官网下载 Python2.7 的安装包，安装过程中，记得勾选 “Add Python to PATH” 选项，将 Python 添加到系统路径中。安装完成后，打开命令提示符，输入python -V，若显示 Python 版本号，则安装成功。

2.2.2 Mac 系统

安装 Xcode：Xcode 是苹果官方的集成开发环境，用于开发 iOS 和 macOS 应用，React Native 开发 iOS 应用需要它。打开 Mac 上的 App Store，搜索 “Xcode”，点击 “获取” 进行下载安装。安装完成后，首次运行 Xcode 时，需要同意许可协议，并安装一些命令行工具。打开终端，输入xcode-select --install，按照提示进行安装。
安装 Node.js：可以通过 Homebrew 来安装 Node.js。如果你的 Mac 上还没有安装 Homebrew，打开终端，运行以下命令进行安装：/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"。安装完成后，运行brew install node命令来安装 Node.js。安装完成后，在终端输入node -v，若显示版本号，则安装成功。
安装 Yarn：同样使用 Homebrew 来安装 Yarn，在终端运行brew install yarn。安装完成后，输入yarn -v验证安装是否成功。为了加快下载速度，可设置 Yarn 的源为淘宝镜像，运行命令：yarn config set registry https://registry.npm.taobao.org。
安装 Watchman：Watchman 是 Facebook 开发的一个文件系统监视工具，在 React Native 开发中能提高开发效率。使用 Homebrew 安装 Watchman，在终端运行brew install watchman。安装完成后，输入watchman --version，若显示版本号，则安装成功。
安装 Flow（可选）：Flow 是一个静态类型检查工具，能帮助我们在开发过程中发现潜在的类型错误，提高代码质量。使用 Homebrew 安装 Flow，运行命令brew install flow。安装完成后，输入flow --version验证安装。