RN入门到进阶，打造高质量上线App

React Native 这个方向，很多人卡在同一个位置：能跑通官方 tutorial，也能用 Flexbox 拼出几个页面，但一到真项目就露怯——列表滑动掉帧、打包体积失控、热更新踩坑、上架被拒。这门课针对的就是这段落差。

它不是又一份"组件 API 速查"，而是围绕"把一个 RN 应用真正发到应用商店并稳定运行"这件事展开。下面按能力缺口拆开说，你可以对照自己的情况决定从哪一节切入。

先确认你是不是这门课的目标读者

如果你属于下面任意一种，内容对你有效：

• 写过 React，但没碰过移动端，不清楚 RN 和 Web 的差异边界在哪；
• 做过 RN 小 Demo，但没处理过原生模块、权限、签名、多渠道打包；
• 接手了一个存量 RN 项目，想搞清楚它为什么卡、为什么包这么大、怎么改；
• 面试时被问到 RN 的渲染机制、桥接通信、性能优化答不上来。

如果你连 React 的组件、状态、生命周期都没写过，建议先把 React 基础补完再来，否则中间关于 Hooks 和状态管理的部分会很吃力。

课程真正想填的三个坑

坑一：把 RN 当 Web 写

RN 里没有 DOM，样式是子集，布局默认不是块级流。课程会先把这套心智模型纠正过来，包括 Flex 默认值、单位处理、平台差异（iOS 与 Android 在阴影、字体、安全区域上的不同）。这部分不解决，后面所有页面都会反复返工。

坑二：只会写页面，不会管状态与数据流

列表分页、下拉刷新、离线缓存、错误重试——这些才是真实 App 的日常。课程围绕异步数据获取与状态管理展开，讨论在什么规模下该用局部状态、什么规模该引入全局方案，而不是一上来堆库。

坑三：从没走过发版流程

证书、签名、打包、灰度、崩溃监控，这些在教程里通常被跳过，但恰恰是"能上线"和"只是能跑"的分界线。课程把发布链路单独拎出来讲，包括不同平台各自的坑。

配套练习与复盘建议

课程带有章节笔记，建议不要只当资料囤着。每完成两到三节，做两件事：一是把当节的代码脱离教程独立重写一遍，二是写一段不超过两百字的笔记，回答"这一节解决了什么问题、如果不用它会出现什么现象"。

最终目标不是看完，而是独立复现一个完整 Demo：包含登录、列表、详情、本地存储、打包配置。这个 Demo 放进作品集时，比十个零散页面更有说服力。

学完之后，你应该能回答这些问题

• RN 的渲染和通信大致怎么走，性能瓶颈通常出在哪一层？
• 什么情况下必须写原生模块，什么情况下用现成库就够了？
• 一个 RN 应用的包体积主要由哪些部分组成，从哪几处下手削减？
• iOS 和 Android 在发布流程上分别有哪些必须提前准备的环节？
• 线上崩溃和性能问题怎么采集、怎么定位到具体页面？

如果这些问题你现在答不上来，那说明缺口就在这里；学完再回头看一遍，能答上，才算真的过了一遍。缺什么补什么，不用假装什么都会。

image.webp 下载附件   保存到相册 2025-6-19 22:24 上传

课程推荐

《RN入门到进阶，打造高质量上线App》image.webp 下载附件   保存到相册 2025-6-19 22:24 上传【技能收获】学完可掌握：React 前端。课程以实战为导向，覆盖从基础概念到完整项目落地的关键步骤，配套章节笔记便于课后复盘与面试前快速回顾。【学习建议】建议按目录顺序学习，先打基础再进入综合实战章节；每完成 2～3 节可结合笔记整理一份学习小结，最终尝试独立复现一套完整 Demo 写入个人作品集。【就业发展】可面向岗位：Linux 运维工程师、SRE、云计算工程师、DevOps 工程师。云原生与自动化运维仍是企业 IT 刚需方向，认证 + 实战项目组合能显著提升面试通过率，适合向中高级运维或架构岗进阶。 若你已有一定编程或运维基础，本课程可帮助你在现有技能栈上快速叠加热门方向能力，提升求职时的项目说服力与薪资谈判空间。

视频目录（115 节）

*   1-2 课程导学  (1647).mp4

*   2-1 开发环境搭建指导-iOS平台【补充**药】  (1346).mp4

*   2-2 开发环境搭建指导-Windows平台【补充**药】  (1658).mp4

*   2-3 React Native项目调试讲解【经验传授，不看后悔】  (1621).mp4

*   2-4 ES6,ES7,ES8学习指南-1【理论熏陶】  (1236).mp4

*   2-5 ES6,ES7,ES8学习指南-2【理论熏陶】  (1208).mp4

*   2-6 ES6,ES7,ES8学习指南-3【理论熏陶】  (0823).mp4

*   2-7 React必备基础讲解-1【欲练此功，必修内功】  (1029).mp4

*   2-8 React必备基础讲解-2【欲练此功，必修内功】  (1754).mp4

*   2-9 React Native布局知识详解-1【画界面就靠它】  (1134).mp4

*   2-10 React Native布局知识详解-2【画界面就靠它】  (1831).mp4

*   2-11 高性能列表组件FlatList、VirtualizedList精讲-1【理论熏陶】  (2248).mp4

*   2-12 高性能列表组件FlatList、VirtualizedList精讲-2【动动手一起做】  (1042).mp4

*   2-13 高性能列表组件FlatList、VirtualizedList精讲-3【动动手一起做】  (0736).mp4

*   2-14 高性能列表组件FlatList、VirtualizedList精讲-4【动动手一起做】  (0658).mp4

*   2-15 高性能列表组件SectionList详解-1【列表还可以这样做】  (0425).mp4

*   2-16 高性能列表组件SectionList详解-2【列表还可以这样做】  (0958).mp4

*   3-2 带你了解react-navigation的前世今生【使用必备基础】  (2145).mp4

*   3-3 矢量图标（react-native-vector-icons）使用指南  (1534).mp4

*   3-4 react-navigation安装使用指南【导航器使用的踩坑避雷针】  (0630).mp4

*   3-5 常用导航器之堆栈导航器createStackNavigator精讲-上  (1708).mp4

*   3-6 常用导航器之堆栈导航器createStackNavigator精讲-下  (1604).mp4

*   3-7 常用导航器之底部导航器createBottomTabNavigator精讲  (1143).mp4

*   3-8 常用导航器之顶部导航器createMaterialTopTabNavigator精讲  (0832).mp4

*   3-9 常用导航器之切换导航器createSwitchNavigator精讲  (0808).mp4

*   3-10 常用导航器之抽屉导航器createDrawerNavigator精讲  (1839).mp4

*   3-11 本章小结  (0120).mp4

*   4-2 需求分析，技术分解，模块设计【了解需求好开发】  (1857).mp4

*   4-3 基于react-navigation的APP导航框架搭建-欢迎页【实战应用】  (0928).mp4

*   4-4 基于react-navigation的APP导航框架搭建-底部导航【实战应用】  (1928).mp4

*   4-5 基于react-navigation的APP导航框架搭建-顶部导航【实战应用】  (0439).mp4

*   4-6 react-navigation高级应用之动态实现底部导航器【此武功很高深】  (1859).mp4

*   4-7 react-navigation高级应用之动态实现顶部导航器【此武功很高深】  (1459).mp4

*   4-8 本章小结  (0117).mp4

*   5-2 Redux由浅入深精讲-1【理论熏陶】  (1043).mp4

*   5-3 Redux由浅入深精讲-2【理论熏陶】  (1011).mp4

*   5-4 Redux集成开发指南-上  (1104).mp4

*   5-5 Redux集成开发指南-下  (2109).mp4

*   5-6 本章小结  (0257).mp4

*   6-2 RN网络编程之Fetch讲解【开启新世界】  (0750).mp4

*   6-3 RN网络编程之Fetch实操-1【开启新世界】  (0951).mp4

*   6-4 RN网络编程之Fetch实操-2【开启新世界】  (0301).mp4

*   6-5 RN数据库编程之AsyncStorage精讲【本地存储】  (1828).mp4

*   6-6 RN离线缓存框架设计讲解【经验传授，举一反三】  (0807).mp4

*   6-7 RN离线缓存框架设计实操-1【经验传授，举一反三】  (0431).mp4

*   6-8 RN离线缓存框架设计实操-2..【经验传授，举一反三】  (0814).mp4

*   7-2 基于Redux+FlatList实现列表页数据加载-1【Redux与列表结合】  (0756).mp4

*   7-3 基于Redux+FlatList实现列表页数据加载-2【Redux与列表结合】  (0720).mp4

*   7-4 列表实现&数据渲染【封装与复用】  (1453).mp4

*   7-5 自定义组件实现列表Item【组件封装】  (1513).mp4

*   7-6 FlatList的高级应用&上拉加载更多功能实现-1【这个技能很实用】  (1839).mp4

*   7-7 FlatList的高级应用&上拉加载更多功能实现-2【这个技能很实用】  (1333).mp4

*   8-2 如何自定义React Native组件？流程&步骤【搞懂流程不慌张】  (1510).mp4

*   8-3 实现自定义组件NavigationBar(NavigationBar的实现&使用)【大神必备技能】  (1736).mp4

*   8-4 趋势页面开发(DataStore扩展&action,reducer封装与使用)【**性装备可扩展】  (2030).mp4

*   8-5 趋势页面开发【列表实现】  (1730).mp4

*   8-6 如何实现React Native自定义**框(Modal组件的使用)【Modal组件的使用】  (1635).mp4

*   8-7 趋势菜单功能开发(DeviceEventEmitter的使用)【DeviceEventEmitter的使用】  (1902).mp4

*   8-8 详情页面开发（WebView、代码封装与复用提取、模块化)-1【H5混合开发】  (1017).mp4

*   8-9 详情页面开发（WebView、代码封装与复用提取、模块化 )-2【H5混合开发】  (0827).mp4

*   8-10 详情页面开发（WebView、代码封装与复用提取、模块化)-3【H5混合开发】  (0852).mp4

*   8-11 react-native-webview开发指南【与时俱进】  (0827).mp4

*   9-2 基于多数据存储设计思想实现FavoriteDao，封**aseItem【思考与实践】  (2058).mp4

*   9-3 收藏功能的实现-1【实战应用】  (1637).mp4

*   9-4 收藏功能的实现-2【实战应用】  (1542).mp4

*   9-5 实现收藏页面-1【实战应用】  (1523).mp4

*   9-6 实现收藏页面-2【实战应用】  (1952).mp4

*   10-2 实现我的列表页-1【列表封装与复用】  (1438).mp4

*   10-3 实现我的列表页-2【列表封装与复用】  (1347).mp4

*   10-4 实现简单浏览器【开启新世界】  (0725).mp4

*   10-5 组装者模式实现关于页面-1【大神必备设计模式】  (0936).mp4

*   10-6 组装者模式实现关于页面-2【大神必备设计模式】  (1402).mp4

*   10-7 组装者模式实现关于页面-3【大神必备设计模式】  (1429).mp4

*   10-8 实现关于作者页面与Linking、Clipboard的使用-1【扩展技能】  (1625).mp4

*   10-9 实现关于作者页面与Linking、Clipboard的使用-2【扩展技能】  (1425).mp4

*   11-2 LanguageDao的封装与动态加载自定义标签的实现-1【Dao层封装】  (1257).mp4

*   11-3 LanguageDao的封装与动态加载自定义标签的实现-2【Dao层封装】  (1135).mp4

*   11-4 自定义标签与自定义语言功能实现-1【边学边做】  (1327).mp4

*   11-5 自定义标签与自定义语言功能实现-2【边学边做】  (1719).mp4

*   11-6 自定义标签与标签移除功能实现【边学边做】  (1835).mp4

*   11-7 标签排序功能实现-1【拖拽排序】  (1456).mp4

*   11-8 标签排序功能实现-2【拖拽排序】  (1034).mp4

*   11-9 自定义主题设计与实现-1【动态修改皮肤】  (1731).mp4

*   11-10 自定义主题设计与实现-2【动态修改皮肤】  (1417).mp4

*   12-2 搜索模块Redux设计与取消异步任务的思考与实现-1【思考与提炼】  (1214).mp4

*   12-3 搜索模块Redux设计与取消异步任务的思考与实现-2【思考与提炼】  (1724).mp4

*   12-4 搜索页面实现-1【实战应用】  (1343).mp4

*   12-5 搜索页面实现-2【实战应用】  (1522).mp4

*   12-6 搜索页面实现-3【实战应用】  (2015).mp4

*   13-2 Native Modules开发精讲(iOS)-1【iOS技术与RN融合】  (1436).mp4

*   13-3 Native Modules开发精讲(iOS)-2【iOS技术与RN融合】  (0852).mp4

*   13-4 Native Modules开发精讲(Android)-1【Android技术与RN融合】  (1434).mp4

*   13-5 Native Modules开发精讲(Android)-2【Android技术与RN融合】  (0640).mp4

*   13-6 React Native App数据统计模块开发精讲-1【运营数据一目了然】  (1333).mp4

*   13-7 React Native App数据统计模块开发精讲-2【运营数据一目了然】  (1610).mp4

*   13-8 React Native App社会化分享、第三方登录开发精讲-1【必备加分技能】  (1303).mp4

*   13-9 React Native App社会化分享、第三方登录开发精讲-2【必备加分技能】  (1719).mp4

*   14-2 React Native 全屏幕适配指南【走在技术前沿】  (2027).mp4

*   14-3 React Native 适配iOS、Android全面屏【走在技术前沿】  (1130).mp4

*   14-4 启动白屏问题解决与启动屏开发【经验传授】  (1742).mp4

*   15-2 CodePush集成与配置【动态化】  (1813).mp4

*   15-3 CodePush部署与更新-1【动态化】  (0823).mp4

*   15-4 CodePush部署与更新-2【动态化】  (1413).mp4

*   15-5 打包发布React Native项目【收获果实】  (1207).mp4

*   16-2 React Native 混合开发实战(Android篇)-1【解锁新的开发方式】  (0959).mp4

*   16-3 React Native 混合开发实战(Android篇)-2【解锁新的开发方式】  (1102).mp4

*   16-4 React Native 混合开发实战(Android篇)-3【解锁新的开发方式】  (1124).mp4

*   16-5 React Native 混合开发实战(Android篇)-4【解锁新的开发方式】  (0935).mp4

*   16-6 React Native 混合开发实战(Android篇)-5【解锁新的开发方式】  (1254).mp4

*   16-7 React Native 混合开发实战(Android篇)-6【解锁新的开发方式】  (0845).mp4

*   16-8 React Native 混合开发实战(iOS篇)-1【解锁新的开发方式】  (1316).mp4

*   16-9 React Native 混合开发实战(iOS篇)-2【解锁新的开发方式】  (1408).mp4

*   16-10 React Native 混合开发实战(iOS篇)-3【解锁新的开发方式】  (0518).mp4

*   17-2 React Native升级与适配指南【后期开发避雷】  (0742).mp4

*   18-1 课程总结  (0249).mp4