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

这门课讲的是 React Native，目标是让你能做出一个可以上线的 App。但先说清楚一件事：它不适合想三天出成果的人。如果你每天只能挤出四十分钟，那也完全没问题，只是节奏要自己拿捏。下面这份导读，是帮你决定从哪一讲开始看、哪些地方可以快进、资料怎么用才不浪费。

先看哪几讲：搭环境和第一个能跑起来的屏幕

课程开头几讲在铺 React 的基础概念——组件、props、state、生命周期。如果你之前写过一点 React，这几讲可以一倍速扫过，主要看它怎么把这些概念搬到 RN 的语境里，因为 RN 的组件和 DOM 组件并不是一一对应，比如 View、Text、ScrollView 这些，跟你熟悉的 div、span 想问题的方式不一样。

真正的门槛在环境搭建那几讲。模拟器、真机调试、依赖版本冲突，很多人第一次卡住就在这儿，而且卡住之后会怀疑自己是不是不适合学。这不是你的问题，是工具链本身就这样。建议这几讲不要赶，遇到报错先别急着跳过，把报错信息完整读一遍，往往比看十篇教程有用。

可以跳过的部分，以及为什么

课程中间有一部分在讲 React 的类组件写法。如果你已经习惯函数组件加 Hooks，这部分可以只花十几分钟看它对比两种写法的差异，理解为什么后面会切到 Hooks 就够了，不必逐行敲。另外一些纯 API 罗列的章节（比如某个库的配置项清单），第一遍可以只记「有这么个东西」，等真正用到的时候再回来查。

还有一类内容建议你按需看：样式与布局。Flexbox 在 RN 里的默认行为和 Web 不太一样（比如 flexDirection 默认是 column），这一讲值得细看，但后面的具体样式参数不用背，写到哪查到哪。

资料怎么配合练习，才不会只看不写

配套的笔记适合在每看完两到三讲之后翻一遍，但不是拿来复制的。更好的用法是：看完一讲，关掉视频，自己凭记忆搭一个最小可运行的页面，跑通了再去看笔记对不对。跑不通的地方，恰好是你没真正理解的地方，记下来，下回重点看。

图片类资料（课程里那些截图和示意图）主要看结构和层次关系，别纠结像素级还原。真机上的效果才是最终标准。

关于「学不会」这件事

这门课不会让你变成 RN 专家，它更像一次完整的项目走查：从零搭到能打包上线，中间踩的坑、做的取舍，它都尽量让你看到。有些章节第一遍听不懂很正常，尤其是原生模块通信和性能优化那几块，涉及 Android 或 iOS 侧的基础，没接触过就是会懵。标记一下，往后放，等主线跑通再回头，感受会完全不一样。

节奏上，建议一周推进三到五讲，配合一次小练习，两个月左右能走完主线。慢一点没关系，能自己独立复现一个能跑的 Demo，比看完所有视频更有价值。

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