当前位置：首页 > news >正文

React Native 快速入门指南

news 2025/11/2 10:29:48

React Native 快速入门指南

前言
- 跨平台技术概述
- React Native 简介
- 技术对比
第1章 React Native 快速入门
- 1.1 React Native 概述
1.2 React Native 环境搭建
- 必需工具清单
- 1.2.1 安装 Node.js
- 1.2.2 安装 Android 开发环境
- 1.2.3 安装 iOS 开发环境（仅 macOS）
- 1.2.4 安装 React Native CLI
1.3 项目结构说明
- 核心文件说明
1.4 React Native 应用示例
- 1.4.1 初始化项目
- 1.4.2 运行项目
- 1.4.3 调试应用
1.5 集成到原生应用
- 1.5.1 集成到原生Android项目
- 1.5.2 集成到原生iOS项目
总结

前言

跨平台技术概述

目前，市面上流行的跨平台技术主要分为三种：

第一种是基于Web浏览器的Hybrid技术方案：采用此种方案时只需要使用HTML5及JavaScript进行开发，然后使用浏览器加载即可实现应用跨平台。这种方案的典型代表有Cordova、Ionic等。

第二种是通过在不同平台上运行某种语言的虚拟机来实现应用跨平台：采用此种方案的跨平台技术主要有React Native和Weex。这种方式通过在原生应用中嵌入JavaScript引擎，执行JavaScript代码并桥接到原生API。

第三种是使用自带渲染引擎实现的跨平台渲染方案：代表技术有QT Mobile和Flutter。这种方案通过自带的渲染引擎直接绘制UI，不依赖平台的原生UI组件。

React Native 简介

React Native是Meta（原Facebook）技术团队于2015年4月开源的一套跨平台开发框架，开发的应用可以同时运行在Android、iOS两大移动平台上。

为了最大限度地提升应用体验，React Native抛弃了传统的浏览器加载的思路，转而采用调用原生API的思路来实现界面的渲染，最终获得了媲美原生移动应用的使用体验。同时，React Native使用JavaScript作为开发语言，也降低了开发的成本，让更多的前端Web开发者加入跨平台开发的行列。

技术对比

从技术选型角度来看：

Flutter的渲染性能是最好的，因为它使用自带的Skia渲染引擎
而从开发效率和维护成本来说，React Native则更优，特别是对于已经有React开发经验的团队

第1章 React Native 快速入门

1.1 React Native 概述

React Native 允许你使用React和JavaScript来开发原生移动应用。它提供了与原生组件相同的用户体验，同时保持了Web开发的效率和灵活性。

核心特点：

🔄 一次编写，多平台运行（Android、iOS）
🎯 使用原生组件，性能接近原生应用
💻 使用JavaScript和React，学习成本低
🛠️ 支持热重载，开发效率高
🔌 丰富的第三方库生态

1.2 React Native 环境搭建

在开始React Native应用开发之前，我们需要先搭建好React Native的开发环境，且需要安装或搭建以下辅助工具及环境。

必需工具清单

Node.js：React Native需要借助Node.js来创建和运行JavaScript代码
原生Android和iOS开发环境：由于React Native的运行需要依赖原生Android和iOS环境，因此需要分别搭建原生Android和iOS的开发环境
其他开发工具：代码编辑器（Visual Studio Code或WebStorm）、远程调试工具（Chrome浏览器）等

1.2.1 安装 Node.js

Node.js本身并不是一门开发语言，也不属于任何JavaScript技术框架，而是瑞安·达尔(Ryan Dahl)开发的一个基于Google Chrome V8引擎的JavaScript运行环境。

安装步骤：

访问Node.js官网：https://nodejs.org/
下载LTS版本：推荐下载长期支持版本（LTS）
验证安装：安装完成后，在终端执行以下命令验证：

node --version
npm --version

1.2.2 安装 Android 开发环境

对于Android开发，需要安装：

Android Studio：官方IDE，包含Android SDK
Android SDK：包含必要的工具和API
环境变量配置：
- 配置 ANDROID_HOME 环境变量
- 将 platform-tools 和 tools 添加到 PATH

验证安装：

adb devices

1.2.3 安装 iOS 开发环境（仅 macOS）

对于iOS开发，需要安装：

Xcode：从App Store安装
Xcode Command Line Tools：
```
xcode-select --install
```
CocoaPods：iOS依赖管理工具
```
sudo gem install cocoapods
```

验证安装：

xcrun simctl list devices

1.2.4 安装 React Native CLI

npm install -g react-native-cli
# 或者使用新架构推荐的方式
npm install -g @react-native-community/cli

1.3 项目结构说明

React Native项目创建后，会包含以下主要目录和文件：

项目根目录/
├── android/          # Android原生代码
├── ios/              # iOS原生代码
├── node_modules/     # 项目依赖
├── src/              # 源代码目录（可选）
├── App.js            # 应用主组件
├── index.js          # 应用入口文件
├── package.json      # 项目配置文件
├── .gitignore        # Git忽略文件配置
└── README.md         # 项目说明文档

核心文件说明

index.js：应用的入口，也是应用业务的入口。它负责注册应用的主组件。

package.json：用于管理工程配置，包括项目依赖、脚本命令等信息。

App.js：应用的主组件，通常包含应用的主要UI结构。

1.4 React Native 应用示例

1.4.1 初始化项目

React Native支持使用命令行和IDE（Integrated Development Environment，集成开发环境）两种方式来创建项目。

方法一：使用命令行创建

使用 React Native CLI：

npx react-native init MyFirstApp
cd MyFirstApp

使用 Expo CLI（推荐新手）：

npx create-expo-app MyFirstApp
cd MyFirstApp

方法二：使用 IDE 创建

大多数现代IDE（如WebStorm、Visual Studio Code）都提供了React Native项目创建的向导。

1.4.2 运行项目

在运行React Native项目之前，需要配置好原生开发环境：

运行iOS应用需要正确安装和配置Xcode、Cocoa Pods
运行Android应用需要正确安装和配置Android Studio和Android SDK Tools

查看可用设备

启动模拟器或真机设置后，我们可以使用如下命令来查看可用的设备：

# 查看可用的iOS设备
xcrun simctl list devices# 查看可用的Android设备
adb devices

启动项目

在项目的根目录下执行如下命令即可启动React Native项目：

# 启动iOS版本的项目
yarn ios
# 或者
yarn react-native run-ios# 启动Android版本的项目
yarn android
# 或者
yarn react-native run-android

启动Metro Bundler（开发服务器）：

yarn start
# 或者
npm start

1.4.3 调试应用

由于React Native项目主要使用React前端语言进行开发，所以调试React Native需要使用Chrome的DevTools，而Chrome浏览器默认集成了这一工具。而且，React Native集成了对Chrome的DevTools的支持，开发者可以很容易地使用该工具调试React Native应用。

调试方法：

在模拟器/真机上操作：
- iOS：按 Cmd + D，选择 “Debug”
- Android：按 Cmd + M（Mac）或 Ctrl + M（Windows），选择 “Debug”
在Chrome中打开调试工具：
- 自动打开 http://localhost:8081/debugger-ui/
- 或者手动在Chrome中访问该地址
使用React Native Debugger：
- 安装独立的调试工具：https://github.com/jhen0409/react-native-debugger

1.5 集成到原生应用

有时候，我们需要将React Native集成到已有的原生Android或iOS应用中，而不是创建一个全新的React Native应用。

1.5.1 集成到原生Android项目

步骤一：初始化Node.js环境

首先，在原生Android项目的根目录下执行 yarn init 命令创建一个名为 package.json 的空文件。然后，根据提示输入对应的配置信息。命令执行完成之后，会发现原生Android项目的根目录下多了一个 package.json 文件。

yarn init

步骤二：安装React Native依赖

使用如下命令添加React和React Native运行环境的支持脚本：

yarn add react react-native

步骤三：配置.gitignore

node_modules 文件夹中的内容不需要上传仓库，所以还需要将 node_modules 文件目录记录到 .gitignore 文件中：

# node_modules
node_modules/# React Native
*.jks
*.p8
*.p12
*.key
*.mobileprovision
*.orig.*
web-build/

步骤四：配置启动脚本

使用文本编辑器打开 package.json 文件，配置React Native的启动脚本：

{"scripts": {"start": "yarn react-native start"}
}

步骤五：创建入口文件

打开原生Android项目，然后在其根目录下创建一个 index.js 文件，将它作为React Native模块的入口：

import { AppRegistry } from 'react-native';
import App from './App';
import { name as appName } from './app.json';AppRegistry.registerComponent(appName, () => App);

步骤六：配置Android依赖

使用Android Studio打开原生Android项目，并在 app 目录下的 build.gradle 文件的 dependencies 代码块中添加React Native和JSC（JavaScript Core）引擎依赖：

dependencies {// React Nativeimplementation "com.facebook.react:react-native:+" // From node_modules// JavaScript Coreimplementation "org.webkit:android-jsc:+"
}

还需要在 android/build.gradle 中添加：

allprojects {repositories {maven {// All of React Native (JS, Obj-C sources, Android binaries) is installed from npmurl("$rootDir/../node_modules/react-native/android")}// ... 其他仓库}
}

1.5.2 集成到原生iOS项目

步骤一：安装CocoaPods依赖

在iOS项目目录下创建 Podfile：

cd ios
pod init

然后在 Podfile 中添加：

platform :ios, '11.0'
use_frameworks!target 'YourApp' dopod 'React', :path => '../node_modules/react-native'pod 'React-Core', :path => '../node_modules/react-native'# 其他需要的React Native模块
end