React Native 项目实战系列视频教程 视频教程

这套 React Native 项目实战系列视频面向的是已经具备一定前端基础、想把 React 的组件化思路迁移到移动端落地的开发者。它不铺垫 HTML/CSS 基础，也不讲 JavaScript 语法入门，而是直接从 React Native 的运行机制切入：JSX 如何映射到原生视图、Metro 打包器的角色、Bridge（新架构下为 JSI/TurboModules）在 JS 与原生之间传递数据的边界在哪里。理解这一层，后面写列表、写导航、写动画时才知道性能瓶颈该往哪找。

技术栈与运行环境假设

课程围绕 React Native CLI 与 Expo 两条常见路径展开，组件层面覆盖 View/Text/Image/ScrollView/FlatList 等核心原语，导航使用 React Navigation 的 Stack 与 Tab 组合，状态管理涉及 Context 与轻量方案的取舍。样式部分沿用 Flexbox 布局模型，与 Web 端差异在于默认 flexDirection 为 column、没有继承式的全局样式。开发调试依赖 Chrome DevTools、React DevTools 与真机连接，涉及 Android 的 adb 端口转发和 iOS 的 Xcode 签名配置——这些环境坑在视频里是逐步暴露的，建议对照自己的机器同步操作一遍，而不是只看不敲。

项目结构与可复用模块

实战项目的目录通常按功能而非文件类型划分，这一点和很多 Web 脚手架的习惯相反。可复用的部分主要集中在几处：一是封装好的请求层，把 fetch 或 axios 的拦截、错误码、loading 状态统一收口；二是通用组件，如按钮、卡片、空状态、下拉刷新容器，它们决定了后续页面开发的效率；三是导航参数的 TypeScript 类型定义，缺了它，页面间传参很容易变成隐式约定。课程中这些模块会随需求逐步抽出，读者可以留意“什么时候该抽象”这个判断点，而不是照抄最终结构。

关键实现环节

• 列表渲染：FlatList 的 keyExtractor、getItemLayout、分页加载与内存回收，是移动端和 Web 差异最大的地方。
• 生命周期与副作用：useEffect 在组件挂载、卸载、页面聚焦（useFocusEffect）时的清理逻辑，直接影响内存泄漏和重复请求。
• 原生能力调用：相机、存储、权限申请等，课程会演示第三方库的接入方式与 Android/iOS 权限声明差异。
• 打包与发布：签名、版本号、构建产物，以及 Expo 托管流程与裸工程流程的分叉点。

作为自学材料的用法

视频教程的通病是容易看会、写废。这套资料的合理用法是：先用视频理解一个模块的设计意图，然后关掉视频，自己在空项目里复现，遇到卡点再回看对应片段。章节笔记适合在复现完成后用来校对遗漏点，尤其是那些一句话带过的配置项。如果你手上已经有一个想做的小应用——记账、打卡、商品浏览都行——直接把它当作练习目标，比跟着课程做同一个示例更能暴露问题。对于已有 React 经验的读者，重点应放在平台差异和原生边界上，组件写法本身迁移成本并不高。