【react】react Native

目录

一、React Native 简介

二、环境搭建

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

2. 创建 React Native 项目

三、核心概念与组件

1. React Native 基础组件

2. 样式与布局

3. 导航（React Navigation）

3. 热重载与快速刷新

五、与原生模块交互

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

2. 自定义原生模块

六、状态管理

1. 使用 React Context

2. 集成 Redux Toolkit

七、性能优化

八、发布应用

1. Android

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 原生开发

二、环境搭建

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

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

brew install node watchman

iOS 开发依赖：

Xcode（App Store 下载）。

安装 CocoaPods（依赖管理）：

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

项目结构：

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

三、核心概念与组件

1. React Native 基础组件

视图容器：

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'）：

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

平台特定样式：

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

3. 导航（React Navigation）

安装与配置：

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

基础导航示例：

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：调试组件树和状态。

npm install -g react-devtools
react-devtools

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

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

3. 热重载与快速刷新

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

五、与原生模块交互

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

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

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

示例代码：

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

2. 自定义原生模块

Android（Java）：

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

iOS（Objective-C）：

// 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

创建全局状态：

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：

// 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;

在组件中使用：

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：

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 开发，逐步构建跨平台移动应用！🚀

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