小豆包

简体中文

English

简体中文

English

主题

React Native ​

直观树级课程结构 ​

text
React Native 教学体系
├── 零、学习前准备
│   ├── 0.1 React Native 是什么？│   ├── 0.2 React Native 与Web / Flutter / 原生的区别│   ├── 0.3 学React Native 之前需要哪些前置知识│   ├── 0.4 JavaScript / TypeScript / React 基础补充
│   └── 0.5 官方文档阅读方式与版本意义
├── 一、初级篇：从入门到能写页面
│   ├── 1.1 环境搭建与开发方式│   │   ├── Framework 与Without Framework 的区别│   │   ├── Node / JDK / Android Studio / Xcode
│   │   ├── iOS 模拟器与 Android 模拟器│   │   ├── 真机调试
│   │   └── 创建第一个React Native 项目
│   ├── 1.2 React Native 项目结构认识
│   │   ├── index.js / App.tsx
│   │   ├── android / ios 目录作用
│   │   ├── package.json
│   │   ├── metro.config.js
│   │   └── Babel / TypeScript 基础配置
│   ├── 1.3 核心组件入门
│   │   ├── View
│   │   ├── Text
│   │   ├── Image
│   │   ├── TextInput
│   │   ├── Button / Pressable
│   │   ├── ScrollView
│   │   ├── FlatList / SectionList
│   │   └── SafeAreaView 等常用容器│   ├── 1.4 样式系统与布局基础
│   │   ├── StyleSheet
│   │   ├── width / height
│   │   ├── Flexbox
│   │   ├── margin / padding / position
│   │   ├── 居中、两栏、三栏、流式布局思维
│   │   └── RN 与Web CSS 的差异│   ├── 1.5 事件、输入与交互
│   │   ├── onPress
│   │   ├── onChangeText
│   │   ├── Touchable 系列与Pressable
│   │   ├── 键盘输入与表单基础
│   │   └── 常见交互组件封装
│   ├── 1.6 图片、文本、列表实战
│   │   ├── 本地图片与网络图片│   │   ├── 文本样式与富文本思维
│   │   ├── 长列表与列表项流畅查询│   │   ├── 空态 / 加载态 / 错误态│   │   └── 商品列表页实战│   ├── 1.7 状态与生命周期基础
│   │   ├── useState
│   │   ├── useEffect
│   │   ├── props 与组件拆分│   │   ├── 可复用组件思想
│   │   └── 页面状态管理入门│   └── 1.8 初级综合实战
│       ├── 登录页│       ├── 列表页│       ├── 详情页│       ├── 搜索页│       └── 个人中心页
├── 二、高级篇：从能做页面到能做项目
│   ├── 2.1 路由与页面组织│   │   ├── 路由基础概念
│   │   ├── Stack / Tab / Drawer 思维
│   │   ├── 页面参数传递│   │   ├── 登录拦截与重定向
│   │   └── 路由层组织规范│   ├── 2.2 网络请求与数据层
│   │   ├── fetch 基础
│   │   ├── Axios / 网络库封装思路
│   │   ├── 请求拦截与响应拦截│   │   ├── 错误码处理│   │   ├── token 管理
│   │   └── Repository / Service 分层
│   ├── 2.3 状态管理进阶│   │   ├── Context 的适用边界
│   │   ├── Redux Toolkit / Zustand / Jotai / MobX 认知
│   │   ├── 页面状态与全局状态划分│   │   ├── 异步状态管理
│   │   └── 状态与 UI 解耦│   ├── 2.4 平台能力与常用API
│   │   ├── AppState
│   │   ├── Dimensions
│   │   ├── Keyboard
│   │   ├── Linking
│   │   ├── Platform
│   │   ├── Permissions 思维
│   │   └── 平台差异收口
│   ├── 2.5 调试与开发效率│   │   ├── Dev Menu
│   │   ├── LogBox
│   │   ├── React Native DevTools
│   │   ├── 原生日志查看
│   │   ├── 常见红屏、白屏、黄框问题│   │   └── 高效定位问题的方法论
│   ├── 2.6 性能优化
│   │   ├── JS 线程与UI 线程认知
│   │   ├── 列表性能优化
│   │   ├── 重渲染与 memo
│   │   ├── 图片与资源懒加载│   │   ├── 动画性能
│   │   ├── Hermes 基础
│   │   └── 常见掉帧问题排查
│   ├── 2.7 测试体系
│   │   ├── 静态检查│   │   ├── 单元测试
│   │   ├── 组件测试
│   │   ├── E2E 测试认知
│   │   └── 如何写更容测试的RN 代码
│   ├── 2.8 构建、打包与发布
│   │   ├── Android 构建
│   │   ├── iOS 构建
│   │   ├── 签名与证书│   │   ├── 环境变量与多环境
│   │   ├── 资源体积优化
│   │   └── 应用上架流程认知
│   └── 2.9 高级综合实战
│       ├── 一个中型业务App 的完整项目结构│       ├── 登录 + 首页 + 列表 + 详情 + 设置
│       ├── 网络层+ 状态层 + 路由层完整实现│       └── 调试、国际化、发布演练
├── 三、资深篇：从项目交付到架构能力
│   ├── 3.1 React Native 底层架构理解
│   │   ├── Legacy Architecture
│   │   ├── New Architecture
│   │   ├── Bridge 的历史问题│   │   ├── JSI
│   │   ├── Fabric
│   │   ├── Turbo Native Modules
│   │   └── 新架构带来的能力变化
│   ├── 3.2 Native Platform 能力接入
│   │   ├── Native Modules
│   │   ├── Native Components
│   │   ├── 原生 SDK 集成
│   │   ├── Android 原生能力桥接
│   │   ├── iOS 原生能力桥接
│   │   └── 跨平台抽象设计
│   ├── 3.3 渲染、线程与性能治理
│   │   ├── 渲染链路理解
│   │   ├── 60fps / 掉帧问题
│   │   ├── 大列表与复杂动画优化
│   │   ├── 启动速度优化
│   │   ├── 内存问题排查
│   │   └── 线上性能监控体系
│   ├── 3.4 工程化与团队协作
│   │   ├── Monorepo 思维
│   │   ├── 目录规范与模块化
│   │   ├── 代码规范与ESLint / TypeScript
│   │   ├── 环境配置与配置中心│   │   ├── 自动化脚本
│   │   └── 组件库与基础设施建设
│   ├── 3.5 CI / CD 与发布体系│   │   ├── 自动构建
│   │   ├── 自动测试
│   │   ├── 自动打包
│   │   ├── 自动发布
│   │   ├── 多环境流水线
│   │   └── 灰度发布与回滚│   ├── 3.6 监控与稳定性治理│   │   ├── 崩溃监控
│   │   ├── JS 异常与Native 异常
│   │   ├── 埋点与性能监控
│   │   ├── 网络异常治理
│   │   ├── 黑屏白屏与启动故障排查│   │   └── 线上问题闭环
│   ├── 3.7 混合开发与渐进接入│   │   ├── RN 集成到原生App
│   │   ├── 多页面混合架构│   │   ├── 容器与通信机制
│   │   ├── 原生与RN 协同治理
│   │   └── 大型存量项目迁移思路
│   └── 3.8 资深综合专题
│       ├── 从0 到1 设计一个企业级 React Native 项目
│       ├── 性能治理专题
│       ├── 新架构接入专题
│       ├── 原生桥接专题
│       └── 技术负责人视角的演进路线
└── 四、专题篇：问题、案例与最佳实践
    ├── 4.1 常见报错与排查手册
    ├── 4.2 布局与适配问题专题
    ├── 4.3 列表与性能问题专题
    ├── 4.4 原生桥接问题专题
    ├── 4.5 Android / iOS 构建问题专题
    ├── 4.6 面试题专题
    └── 4.7 企业项目案例拆解

第一阶段：初级篇 ​

这一阶段的核心目标是：

  • 让学习者知道React Native 是什么- 能完成环境搭建- 能写常见页面
  • 能理解RN 的组件、样式、布局、触摸、列表等核心概念

初级篇大章节设计 ​

第1 章：React Native 介绍与学习准备 ​

建议包含：

  • React Native 的定位- 与Web、Flutter、原生开发的区别
  • 学习 React Native 所需前置知识
  • React / JSX / Hooks 最小前置要求

第2 章：环境搭建与第一个项目 ​

建议包含：

  • 官方推荐的环境搭建方式- Framework 与Without Framework 的区别- Android Studio / Xcode / 真机调试
  • 创建项目并运行到 Android / iOS

对应官方方向：

  • Getting Started
  • Set Up Your Environment

第3 章：React Native 项目结构与开发流程 ​

建议包含：

  • App.tsx
  • index.js
  • android / ios
  • Metro 的作用- Fast Refresh 与开发流程

第4 章：核心组件入门 ​

建议包含：

  • View
  • Text
  • Image
  • TextInput
  • Button
  • ScrollView
  • FlatList

对应官方方向：

  • Core Components and APIs

第5 章：样式与布局系统 ​

建议包含：

  • StyleSheet
  • width / height
  • flex
  • flexDirection
  • justifyContent
  • alignItems
  • position

对应官方方向：

  • Height and Width
  • Layout with Flexbox

第6 章：用户输入与交互 ​

建议包含：

  • onPress
  • Pressable
  • Touchable 系列
  • 文本输入
  • 键盘处理基础

对应官方方向：

  • Handling Touches

第7 章：列表、图片与页面实战 ​

建议包含：

  • FlatList 使用
  • keyExtractor
  • 列表性能基础意识
  • 图片展示
  • 空态 / 加载态 / 错误态

第8 章：初级综合项目 ​

建议做一个小型实战，例如：

  • 登录页- 首页
  • 列表页- 详情页

阶段导航 ​

第二阶段：高级篇 ​

这一阶段的核心目标是：

  • 让学习者具备真实项目开发能力- 能处理状态、路由、网络、平台差异、调试、性能、测试和发布

高级篇大章节设计 ​

第9 章：项目级路由体系 ​

建议包含：

  • Stack / Tab 导航思维
  • 页面跳转
  • 参数传递- 登录拦截
  • 路由组织规范

说明： 这部分更多属 React Native 项目生态，而非RN 官方核心 API，但正式项目必须掌握。

第10 章：网络请求与数据获取 ​

建议包含：

  • 网络请求基础
  • API 封装
  • token 处理
  • 错误处理
  • 加载态管理

第11 章：状态管理进阶 ​

建议包含：

  • 局部状态vs 全局状态- Context 适用边界
  • Redux Toolkit / Zustand 等方案认知- 数据流与组件解耦

第12 章：平台能力与平台差异 ​

建议包含：

  • Platform
  • Platform.select
  • 平台文件分离
  • AppState
  • Dimensions
  • Linking
  • 平台适配策略

对应官方方向：

  • Platform-Specific Code
  • AppState

第13 章：调试与问题定位 ​

建议包含：

  • Dev Menu
  • LogBox
  • React Native DevTools
  • 原生日志查看
  • 调试 JS 与调试Native 的差异 对应官方方向：
  • Debugging Basics
  • Debugging Native Code

第14 章：性能优化 ​

建议包含：

  • JS 线程与UI 线程
  • 为什么会掉帧
  • 列表性能优化
  • memo / useMemo / useCallback 的边界- 图片与资源懒加载- Hermes

对应官方方向：

  • Performance Overview
  • Using Hermes

第15 章：测试体系 ​

建议包含：

  • 静态检查- 单元测试
  • 组件测试
  • E2E 测试

对应官方方向：

  • Testing Overview

第16 章：构建、打包、发布 ​

建议包含：

  • Android 打包
  • iOS 打包
  • 环境配置
  • 版本管理
  • 发布流程

第17 章：高级综合项目 ​

建议做一个完整中型项目，例如：

  • 用户系统
  • 首页 Feed
  • 搜索
  • 收藏
  • 设置中心
  • 网络层、路由层、状态层完整组织

阶段导航 ​

第三阶段：资深篇 ​

这一阶段的核心目标是：

  • 理解 React Native 底层
  • 具备原生桥接能力
  • 具备大型项目工程化与性能治理能力
  • 能站在技术负责人视角组织 RN 项目

资深篇大章节设计 ​

第18 章：React Native 架构演进 ​

建议包含：

  • Legacy Architecture
  • 为什么要 New Architecture
  • Bridge 的局限- JSI 的意义 对应官方方向：
  • About the New Architecture

第19 章：Fabric 与渲染系统 ​

建议包含：

  • Fabric 是什么- 它解决什么问题- 对渲染与同步能力的影响 对应官方方向：
  • Fabric

第20 章：Turbo Native Modules 与Native Platform ​

建议包含：

  • Native Modules
  • Native Components
  • Turbo Modules
  • Codegen
  • 原生模块接入流程

对应官方方向：

  • Native Platform
  • Turbo Native Modules Introduction

第21 章：原生能力桥接实战 ​

建议包含：

  • Android 原生模块接入
  • iOS 原生模块接入
  • JS <-> Native 数据传递- 异步能力桥接
  • 设备能力封装

第22 章：大型项目性能治理 ​

建议包含：

  • 启动优化
  • 大列表懒化- 图片与内存缓存- 性能监控指标
  • 线上卡顿治理

第23 章：工程化体系 ​

建议包含：

  • Monorepo
  • 模块化- 代码规范
  • 构建脚本
  • 多环境- 配置中心
  • 团队协作规范

第24 章：CI / CD 与稳定性建设 ​

建议包含：

  • 自动化构建- 自动化测试
  • 自动发布
  • 崩溃监控
  • 日志体系
  • 灰度和回滚

第25 章：混合开发与存量项目集成 ​

建议包含：

  • RN 集成到原生App
  • 多容器架构- 容器与页面通信
  • 存量系统渐进迁移

第26 章：资深综合专题 ​

建议包含：

  • 从0 到1 设计一个企业级 RN 项目
  • 新架构迁移方案- 插件治理
  • 性能治理
  • 原生协同治理

阶段导航 ​

基于 MIT 许可发布

版权所有 © 2016-2026 小豆包