【react】react Native

[一、React Native 简介](#一、React Native 简介)

二、环境搭建

[1. 开发环境配置（以 macOS 为例）](#1. 开发环境配置（以 macOS 为例）)

[2. 创建 React Native 项目](#2. 创建 React Native 项目)

三、核心概念与组件

[1. React Native 基础组件](#1. React Native 基础组件)

[2. 样式与布局](#2. 样式与布局)

[3. 导航（React Navigation）](#3. 导航（React Navigation）)

[3. 热重载与快速刷新](#3. 热重载与快速刷新)

五、与原生模块交互

[1. 调用原生功能（如相机）](#1. 调用原生功能（如相机）)

[2. 自定义原生模块](#2. 自定义原生模块)

六、状态管理

[1. 使用 React Context](#1. 使用 React Context)

[2. 集成 Redux Toolkit](#2. 集成 Redux Toolkit)

七、性能优化

八、发布应用

[1. Android](#1. Android)

[2. iOS](#2. iOS)

九、学习资源

本文用的是TypeScript

一、React Native 简介

什么是 React Native

由 Facebook 推出的跨平台移动应用开发框架，使用 JavaScript/TypeScript 和 React 语法，可生成 iOS 和 Android 原生应用。

核心特性：一次编写，多端运行 、热重载（Hot Reload） 、原生性能。

与 React 的关系：基于 React 设计思想，但将虚拟 DOM 映射到原生组件（如 View 对应 UIView/Android View）。

适用场景

开发中低复杂度的跨平台应用（如社交、电商、工具类 App）。

快速原型开发或需要频繁迭代的 MVP（最小可行产品）。

React Native vs Flutter vs 原生开发

特性	React Native	Flutter	原生开发（Java/Swift）
语言	JavaScript/TypeScript	Dart	Java/Kotlin/Swift
性能	接近原生	接近原生	最佳
生态	丰富（NPM 包支持）	快速增长	原生 SDK
学习曲线	低（React 开发者友好）	中等	高

二、环境搭建

1. 开发环境配置（以 macOS 为例）

Node.js 和 Watchman（文件监控工具）：

TypeScript 复制代码

brew install node watchman

iOS 开发依赖：

Xcode（App Store 下载）。

安装 CocoaPods（依赖管理）：

bash 复制代码

sudo gem install cocoapods

Android 开发依赖：

JDK 11+。

Android Studio（安装 SDK 和模拟器）。

配置环境变量（ANDROID_HOME）。

2. 创建 React Native 项目

使用官方脚手架：

npx react-native init MyApp --template react-native-template-typescript

项目结构：

bash 复制代码

MyApp/
  android/    # Android 原生代码
  ios/        # iOS 原生代码
  src/        # 业务代码（推荐）
    components/
    screens/
    App.tsx
  index.js    # 入口文件

三、核心概念与组件

1. React Native 基础组件

视图容器：

TypeScript 复制代码

import { View, Text, StyleSheet } from 'react-native';
const App = () => (
  <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 }
});

常用组件：

Text：显示文本。

Image：加载图片（本地或网络）。

ScrollView：可滚动视图。

FlatList：高性能列表。

Button / TouchableOpacity：交互按钮。

2. 样式与布局

Flexbox 布局 （与 Web 类似，但默认 flexDirection: 'column'）：

TypeScript 复制代码

<View style={{ flex: 1, flexDirection: 'row', justifyContent: 'space-between' }}>
  <Text>Left</Text>
  <Text>Right</Text>
</View>

平台特定样式：

TypeScript 复制代码

import { Platform } from 'react-native';
const styles = StyleSheet.create({
  box: {
    padding: Platform.OS === 'ios' ? 20 : 10,
    ...Platform.select({ android: { backgroundColor: 'blue' } })
  }
});

安装与配置：

TypeScript 复制代码

npm install @react-navigation/native @react-navigation/native-stack
npm install react-native-screens react-native-safe-area-context

基础导航示例：

TypeScript 复制代码

import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

const Stack = createNativeStackNavigator();
const App = () => (
  <NavigationContainer>
    <Stack.Navigator>
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Details" component={DetailsScreen} />
    </Stack.Navigator>
  </NavigationContainer>
);

React DevTools：调试组件树和状态。

TypeScript 复制代码

npm install -g react-devtools
react-devtools

Flipper：集成日志、网络请求、数据库查看。

下载 Flipper，启动后连接设备或模拟器。

3. 热重载与快速刷新

修改代码后自动刷新界面（无需重新编译）。

五、与原生模块交互

1. 调用原生功能（如相机）

使用社区库 （如 react-native-camera）：

TypeScript 复制代码

npm install react-native-camera
cd ios && pod install

示例代码：

TypeScript 复制代码

import { RNCamera } from 'react-native-camera';
const CameraScreen = () => (
  <RNCamera style={{ flex: 1 }} captureAudio={false}>
    <Button title="拍照" onPress={() => {/* 拍照逻辑 */}} />
  </RNCamera>
);

2. 自定义原生模块

Android（Java）：

TypeScript 复制代码

// MyModule.java
public class MyModule extends ReactContextBaseJavaModule {
  @ReactMethod
  public void showToast(String message) {
    Toast.makeText(getReactApplicationContext(), message, Toast.LENGTH_SHORT).show();
  }
}

iOS（Objective-C）：

TypeScript 复制代码

// MyModule.m
RCT_EXPORT_METHOD(showToast:(NSString *)message) {
  dispatch_async(dispatch_get_main_queue(), ^{
    UIAlertController *alert = [UIAlertController alertControllerWithTitle:nil message:message preferredStyle:UIAlertControllerStyleAlert];
    [self presentViewController:alert animated:YES completion:nil];
  });
}

六、状态管理

1. 使用 React Context

创建全局状态：

TypeScript 复制代码

import React, { createContext, useContext, useState } from 'react';
type Theme = 'light' | 'dark';
const ThemeContext = createContext<{
  theme: Theme;
  toggleTheme: () => void;
} | null>(null);

export const ThemeProvider = ({ children }: { children: React.ReactNode }) => {
  const [theme, setTheme] = useState<Theme>('light');
  const toggleTheme = () => setTheme(prev => prev === 'light' ? 'dark' : 'light');
  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
};

2. 集成 Redux Toolkit

安装与配置：

npm install @reduxjs/toolkit react- redux

创建 Store：

TypeScript 复制代码

// store.ts
import { configureStore } from '@reduxjs/toolkit';
const store = configureStore({ reducer: rootReducer });
export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

在组件中使用：

TypeScript 复制代码

import { useSelector, useDispatch } from 'react-redux';
const Counter = () => {
  const count = useSelector((state: RootState) => state.counter.value);
  const dispatch = useDispatch();
  return <Button title="+" onPress={() => dispatch(increment())} />;
};

七、性能优化

1. 避免不必要的渲染

使用 React.memo 或 useMemo/useCallback。

2. 列表优化

使用 FlatList 替代 ScrollView + map。

3. 图片优化

压缩图片，使用 resizeMode 控制缩放。

4. 减少 Bridge 通信

避免频繁调用原生模块。

八、发布应用

1. Android

生成签名 APK：

TypeScript 复制代码

cd android && ./gradlew bundleRelease # 生成 .aab 文件（Google Play）
./gradlew assembleRelease # 生成 .apk 文件

2. iOS

通过 Xcode 打包（Product → Archive），上传至 App Store Connect。

九、学习资源

官方文档

React Native 官方文档

社区资源

Expo（快速开发工具链）

React Native Elements（UI 库）

实战项目

开发一个天气预报 App（集成 API、导航、状态管理）。

通过以上内容，你可以快速上手 React Native 开发，逐步构建跨平台移动应用！🚀

码字不易，各位大佬点点赞呗