React Native 全栈开发实战班 -React Native 基础

本课程旨在帮助学员系统掌握 React Native 全栈开发技能，从基础入门到实战项目开发。课程将分为多个模块，第一部分将聚焦于 React Native 的基础知识，包括开发环境搭建、React Native 简介与特点，以及项目结构解析。

第一部分：React Native 基础

一、开发环境搭建

在开始 React Native 开发之前，首先需要搭建好开发环境。以下是详细的步骤：

安装 Node.js 和 npm

React Native 依赖 Node.js 和 npm 进行包管理。
- 前往 Node.js 官网下载并安装最新的 LTS 版本。
- 安装完成后，在终端中运行以下命令验证安装：
```
node -v
npm -v
```
安装 React Native CLI

React Native CLI 是用于创建和管理 React Native 项目的命令行工具。
```
npm install -g react-native-cli
```
安装 Android Studio (Android 开发)
- 下载并安装 Android Studio。
- 在安装过程中，确保选择以下组件：
  - Android SDK
  - Android SDK Platform
  - Android Virtual Device
- 配置环境变量，将 Android SDK 的路径添加到系统 PATH 中。
安装 Xcode (iOS 开发)
- 前往 Mac App Store 下载并安装 Xcode。
- 安装完成后，打开 Xcode 并安装命令行工具：
```
xcode-select --install
```
配置 Android 模拟器或 iOS 模拟器
- 打开 Android Studio，创建一个新的虚拟设备。
- 或者，使用 Xcode 创建 iOS 模拟器。
安装代码编辑器

推荐使用 Visual Studio Code 作为 React Native 开发的主要编辑器，并安装以下插件：
- React Native Tools
- ESLint
- Prettier
验证开发环境
- 创建一个新的 React Native 项目：
```
react-native init MyFirstProject
```
- 进入项目目录，运行项目：
```
cd MyFirstProject
react-native run-android  // 运行 Android 应用
react-native run-ios     // 运行 iOS 应用
```
- 模拟器或真机上应显示 React Native 欢迎页面。

二、React Native 简介与特点

React Native 是由 Facebook 开发的开源移动应用框架，旨在使用 JavaScript 和 React 构建原生移动应用。

主要特点：

跨平台开发

使用一套代码库即可构建 iOS 和 Android 应用，显著提高开发效率。
原生组件

React Native 提供了丰富的原生组件，如 View, Text, Image, ScrollView 等，这些组件渲染为平台原生 UI 组件，性能优异。
热重载

支持热重载功能，开发者可以实时预览代码修改，无需重新编译应用，提升开发效率。
社区和生态系统

React Native 拥有庞大的社区和丰富的第三方库，开发者可以轻松集成各种功能模块。
性能优化

React Native 通过原生模块桥接和异步渲染机制，确保应用性能接近原生应用。
可维护性

使用 React 的组件化开发模式，代码结构清晰，易于维护和扩展。

三、React Native 项目结构解析

一个典型的 React Native 项目结构如下：

MyFirstProject/
├── android/          // Android 项目文件
├── ios/              // iOS 项目文件
├── node_modules/     // 依赖包
├── src/              // 源代码目录
│   ├── components/   // 可复用的 UI 组件
│   ├── containers/   // 容器组件
│   ├── navigation/   // 导航配置
│   ├── screens/      // 页面组件
│   ├── services/     // API 服务
│   ├── store/        // Redux 状态管理
│   └── utils/        // 工具函数
├── App.js            // 应用入口文件
├── index.js          // 应用注册文件
├── package.json      // 项目依赖和脚本
├── .gitignore        // Git 忽略配置
└── README.md         // 项目说明文档

关键文件说明：

android/ 和 ios/
- 分别存放 Android 和 iOS 平台的项目文件。
- 不建议手动修改这些文件，除非需要自定义原生模块。
node_modules/
- 存放项目依赖的所有 npm 包。
src/
- 存放应用的主要源代码，按照功能模块进行组织。
App.js
- 应用的主组件，定义应用的根组件和导航结构。
index.js
- 应用入口文件，注册 App 组件到 React Native 应用。
package.json
- 定义项目的基本信息和依赖包，以及常用的 npm 脚本。

示例代码：

// App.js
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';const App = () => {return (<View style={styles.container}><Text style={styles.text}>Hello, React Native!</Text></View>);
};const styles = StyleSheet.create({container: {flex: 1,justifyContent: 'center',alignItems: 'center',},text: {fontSize: 20,color: '#333',},
});export default App;

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