React Native简介与环境搭建

欢迎来到React Native的世界

作为一名有安卓开发基础、TypeScript基础和Web开发基础的开发者，你已经具备了学习React Native的绝佳条件。本文将带你快速了解React Native，并帮助你搭建好开发环境，为后续的学习之旅做好准备。

一、React Native是什么？

React Native是Facebook（现Meta）开发的开源框架，用于使用JavaScript和React构建跨平台移动应用。它的核心思想是："Learn once, write anywhere"（一次学习，随处编写）。

React Native的优势

跨平台开发：使用同一套代码库构建iOS和Android应用
原生性能：不同于Hybrid应用，React Native应用最终会编译为原生代码
热重载：开发过程中可以实时看到修改效果，大大提高开发效率
庞大的生态系统：丰富的第三方库和组件
活跃的社区：持续的更新和改进

与原生安卓开发的对比

特性	原生安卓开发	React Native开发
开发语言	Java/Kotlin	JavaScript/TypeScript
UI构建	XML布局文件	JSX语法
组件系统	Activity/Fragment/View	React组件
构建工具	Gradle	Metro/Bundler
热更新	不支持	支持
跨平台	仅Android	Android + iOS
开发效率	相对较低	相对较高
性能	原生性能	接近原生性能

与Web开发的联系

如果你有Web开发经验，特别是React经验，那么学习React Native会非常容易。React Native借鉴了React的核心概念，如组件化、Props、State等，只是将Web组件替换为了原生移动组件。

二、环境搭建

前提条件

Node.js：推荐使用LTS版本，可从官网下载
npm或Yarn：包管理工具
Git：版本控制工具
Java Development Kit (JDK)：版本11或更高
Android Studio：用于安卓开发和模拟器

Windows环境搭建步骤

安装Node.js
- 访问Node.js官网下载LTS版本
- 运行安装程序并按照提示完成安装
- 验证安装：打开命令提示符，运行 node -v 和 npm -v
安装Java Development Kit (JDK)
- 访问Oracle JDK官网或OpenJDK官网下载JDK 11或更高版本
- 运行安装程序并按照提示完成安装
- 配置环境变量：将JDK的bin目录添加到系统PATH中
- 验证安装：运行 java -version
安装Android Studio
- 访问Android Studio官网下载最新版本
- 运行安装程序并按照提示完成安装
- 在Android Studio中，安装以下组件：
  - Android SDK
  - Android SDK Platform
  - Android Virtual Device
配置Android环境变量
- 打开系统环境变量设置
- 添加以下环境变量：
  - ANDROID_HOME：指向Android SDK的安装目录（通常为 C:\Users\用户名\AppData\Local\Android\Sdk）
  - 将 %ANDROID_HOME%\platform-tools 和 %ANDROID_HOME%\tools 添加到PATH中
安装React Native CLI
```
npm install -g react-native-cli
```

macOS环境搭建步骤

安装Homebrew（如果尚未安装）

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

安装Node.js
```
brew install node
```
安装Java Development Kit (JDK)
```
brew install openjdk@11
```
安装Android Studio
- 访问Android Studio官网下载最新版本
- 运行安装程序并按照提示完成安装
- 在Android Studio中，安装必要的组件

配置Android环境变量

编辑 ~/.bash_profile 或 ~/.zshrc 文件，添加以下内容：

export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools

运行 source ~/.bash_profile 或 source ~/.zshrc 使配置生效

安装React Native CLI
```
npm install -g react-native-cli
```

三、创建第一个React Native项目

现在，让我们创建第一个React Native项目，体验一下开发流程。

使用React Native CLI创建项目

打开命令提示符或终端
导航到你想要创建项目的目录
```
cd 你的项目目录
```
创建新项目
```
react-native init MyFirstApp --template react-native-template-typescript
```
注意：--template react-native-template-typescript 参数会创建一个使用TypeScript的项目，这对于有TypeScript基础的你来说是个不错的选择。
等待项目创建完成
这可能需要一些时间，因为它会下载和安装所有必要的依赖项。

运行项目

导航到项目目录
```
cd MyFirstApp
```
启动Metro服务器
```
npx react-native start
```
在安卓模拟器或真机上运行应用
- 打开一个新的命令提示符或终端窗口
- 导航到项目目录
- 运行以下命令：
```
npx react-native run-android
```

第一次运行可能遇到的问题

模拟器启动失败：确保Android模拟器已正确安装并运行
SDK版本不匹配：确保项目使用的SDK版本与你安装的版本一致
Gradle构建失败：可能需要配置Gradle代理或更新Gradle版本

四、项目结构简介

创建项目后，你会看到以下主要文件和目录：

android/：安卓原生代码目录
ios/：iOS原生代码目录
src/：TypeScript源代码目录（如果使用TypeScript模板）
App.tsx：应用的主入口组件
package.json：项目配置和依赖项

五、下一步学习计划

恭喜你！你已经成功搭建了React Native开发环境并创建了第一个项目。接下来，我们将在后续的博客中学习：

React Native基础概念
React Native组件系统
样式与布局
导航系统
数据处理
原生功能集成
性能优化
测试与调试
应用发布

总结

React Native为移动应用开发带来了新的思路，它结合了Web开发的效率和原生开发的性能。作为一名有安卓、TypeScript和Web基础的开发者，你已经具备了快速掌握React Native的能力。

在接下来的学习中，我们将充分利用你已有的知识，帮助你快速成为一名React Native开发专家。

祝你学习愉快！

React Native简介与环境搭建