如果你在招聘网站上刷过前端岗位,会发现「熟悉 React Native」出现的频率越来越高。但真正让多数人卡住的不是「要不要学」,而是「学完能不能自己写出一个像样的 App」。这门《RN从0到1系统精讲与小红书APP实战》就是冲着这个问题来的:它不满足于讲几个组件和 API,而是把一个小红书级别的移动端项目从头搭到尾。

它解决的是哪个具体场景

移动端跨平台开发是很多前端的技能缺口。你会写 React,但一碰到原生端的环境配置、导航跳转、列表性能优化、图片瀑布流,就容易停在「看懂了但写不出来」的状态。这门课瞄准的正是从「会 React 语法」到「能交付一个可运行的 App」之间的那段路。选题用一个内容社区类 App 做主线,涉及的都是真实工作里反复出现的东西:多页签切换、无限滚动、图片懒加载、详情页参数传递、本地缓存。这些场景一旦跑通,换个业务方向也能迁移过去。

学完能独立做什么

  • 独立搭建 RN 开发环境,处理常见的版本冲突和真机调试问题;
  • 用组件化的方式组织页面结构,而不是把所有逻辑堆在单个文件里;
  • 完成带导航栈、列表渲染、下拉刷新与上拉加载的完整页面;
  • 对接口数据做统一处理,处理加载态、空态和错误态;
  • 把项目打包成可安装的包,走完一次基础的上线前流程。

换句话说,结束后你应该能拿出一个自己写的移动端项目,而不是只停留在笔记层面。这一点对转行和求职的人来说,比多背几个 API 更有用。

资料适合什么基础

课程定位是「从 0 到 1」,但这里的 0 有前提:最好已经了解 JavaScript 基础语法,知道组件和 props 是什么。如果完全没有前端经验,建议先把 JS 和 React 的基本用法过一遍再进来,否则前几章的环境配置和语法讲解会消耗掉大量耐心。反过来,如果你已经写过 React 项目、只是没碰过 RN,那前面的基础部分可以倍速,重点看导航、列表性能和项目组织这几块。

怎么用这套资料效率更高

这类项目实战课最大的坑是「跟着敲完全懂,关掉视频就忘」。比较稳妥的用法是:每个功能模块先看一遍思路,然后关掉视频自己写,卡住了再回头查对应章节。复盘时不要照抄代码,而是用自己的话记下这一步解决了什么问题、用了哪个组件或 API。

需要提醒的是,配套资料里涉及环境安装和依赖版本,移动端生态更新较快,遇到和视频不一致的报错属于正常现象,学会看报错信息、去官方文档找答案,本身就是这门课要练的能力之一。项目做完后,建议把源码整理成自己的仓库,README 里写清功能点和踩过的坑,面试时这比一句「学过 RN」有说服力得多。

总的来说,这门课适合把它当作一次完整的移动端练手,而不是速成捷径。愿意花时间动手写一遍的人,收获会明显大于只是收藏资料的人。

课程目录

第1章 【课程介绍】把握整套课程知识结构和大纲 1-1 课程导学 (10:32).mp4
 1-2 仿写小红书App效果演示 (01:57).mp4
 1-3 课程大纲介绍,从整体上了解本套课程的学习内容 (05:17).mp4
 1-4 课程知识导图展示,从框架上把握课程知识结构 (02:28).mp4
 1-5 课程代码,及资料下载方法 (02:11).mp4
 第2章 【学前准备】了解ReactNative优势和本套课程的学习目标 2-1 跨平台的优势和机遇,在移动端内卷的当下,只有跨平台才能破局重生 (03:59).mp4
 2-2 各种跨平台方案的百家争鸣 (01:47).mp4
 2-3 ReactNative和Flutter的比较,客观比较两者优缺点,从需选择 (05:40).mp4
 2-4 学习ReactNative的优势,增强学习本套课程的信心 (00:48).mp4
 2-5 ReactNative大厂级应用 (00:51).mp4
 2-6 本套课程的学习目标 (01:40).mp4
 第3章 【开发环境搭建和 demo 运行】为正式学习做好前期准备 3-1 开发环境介绍:JS端环境+Native端环境 (03:28).mp4
 3-2 安装node和watchman (01:00).mp4
 3-3 安装VSCode (00:56).mp4
 3-4 安装JDK和AndroidStudio (01:45).mp4
 3-5 安装sdk platform和sdk tools (01:50).mp4
 3-6 配置环境变量 (01:13).mp4
 3-7 AndroidStudio创建模拟器,及m1芯片创建方法 (05:11).mp4
 3-8 使用cli命令创建ReactNative工程,并启动运行 (08:41).mp4
 第4章 为“原生开发”同学补充前端基础 4-1 学习js的基本使用,了解如何申明变量、函数、以及js的一些基本特性 (13:02).mp4
 4-2 了解什么是ES5、ES6,掌握ES6常用的一些方法 (26:15).mp4
 4-3 了解什么是babel以及常见的配置 (04:22).mp4
 4-4 学习CSS-flex布局基础,为后面正式学习rn布局打下基础 (12:49).mp4
 4-5 npm是什么?npm如何检索、安装和卸载 (02:45).mp4
 4-6 使用nrm管理npm源 (02:44).mp4
 第5章 为“前端开发”同学补充原生基础 5-1 如何连接安卓设备以及开发中常用的adb命令 (13:43).mp4
 5-2 移动端ui结构和设备特性 (06:11).mp4
 5-3 RN开发中常见的原生文件 (10:38).mp4
 5-4 RN和原生组件对应关系 (02:35).mp4
 5-5 原生开发语言选择 (03:16).mp4
 5-6 移动端应用发布及主流的应用市场 (07:04).mp4
 5-7 移动端特有的生产热修复机制和应用场景 (07:29).mp4
 5-8 移动端设备的版本兼容选择 (03:24).mp4
 第6章 【React基础知识和工程结构】掌握核心文件的用法和职能 6-1 工程目录结构,了解关键文件作用 (13:02).mp4
 6-2 构建通用源码目录结构,好的工程从模块划分开始 (07:06).mp4
 6-3 package.json全局大管家文件 (14:11) 6-4 import和export,三种导入导出类型 (09:58).mp4
 6-5 class组件的标准写法和生命周期 (23:52).mp4
 6-6 函数式组件的优势和常用hook (31:38).mp4
 6-7 JSX语法:高效开发源自于此 (38:53).mp4
 6-8 课后练习:RN计数器 (03:16).mp4
 6-9 作业答疑 (07:00).mp4
 第7章 【夯实基础-系统组件精讲】全面掌握系统组件的使用方法以及各种属性的应用场景 7-1 章节内容介绍 (05:11).mp4
 7-2 View:ui构建的基石,一切页面的起点 (37:04).mp4
 7-3 Text 使用占比最高的组件,使用简单,深入复杂 (34:48).mp4
 7-4 Image构建精美ui (29:24).mp4
 7-5 ImageBackground-View和Image的结合 (19:39).mp4
 7-6 TextInput唯一且强大的输入组件 (35:21).mp4
 7-7 TouchableOpacity最好用的点击组件 (13:37).mp4
 7-8 TouchableHighlight使用略显麻烦的点击组件 (06:40).mp4
 7-9 TouchbaleWithoutFeedback几乎不用的点击组件 (04:19).mp4
 7-

10 Button 使用简单但样式固定 (05:48).mp4
 7-

11 强大的 Pressable (13:44).mp4
 7-

12 ScrollView 基础滚动组件 (42:10).mp4
 7-

13 FlatList 高性能列表组件 (40:49).mp4
 7-

14 SectionList 多类型分组列表 (21:50).mp4
 7-

15 RefreshControl 下拉刷新 (09:01).mp4
 7-

16 Modal 自定义弹窗 (24:01).mp4
 7-

17 StatusBar 适配状态栏 (11:04).mp4
 7-

18 Switch 开关切换 (08:22).mp4
 7-

19 课后作业个人信息页面练习 (05:28).mp4
 7-

20 作业答疑 (13:17).mp4
 第8章 【夯实基础-常用API】深刻理解RN核心API的功能 8-1 章节内容介绍 (04:52).mp4
 8-2 alert 和 console 你不知道的调试小技巧 (28:45).mp4
 8-3 Dimension 和 useWindowDimension 获取屏幕信息 (13:04).mp4
 8-4 Platform 获取平台属性 (09:55).mp4
 8-5 StyleSheet 构建灵活样式表 (11:44).mp4
 8-6 Linking 一个 api 节省 

50 行代码 (23:14).mp4
 8-7 PixelRatio 像素比例工具 (09:11).mp4
 8-8 BackHandler 安卓返回键适配 (07:53).mp4
 8-9 PermissionsAndroid 轻松解决权限问题 (08:39).mp4
 8-

10 Vibration 简单好用的震动交互 (07:30).mp4
 8-

11 ToastAndroid 安卓平台的提示 (05:35).mp4
 8-

12 Transform 矩阵变换的伪3D效果 (10:26).mp4
 8-

13 Keyboard 键盘操作有神器 (06:44).mp4
 8-

14 课后作业和本章小结 (01:46).mp4
 第9章 【夯实基础-RN动画系统】全面掌握RN动画所有技巧,挑战90%动画效果 9-1 简单示例学习基础动画方法 (13:01).mp4
 9-2 四大动画类型 (12:29).mp4
 9-3 六种支持动画的组件 (03:05).mp4
 9-4 平移动画的多种属性支持 (04:05).mp4
 9-5 Animated.decay 衰减动画函数 (06:21).mp4
 9-6 Animated.spring 弹性动画函数 (14:17).mp4
 9-7 Animated.timing 时间动画函数 (16:13).mp4
 9-8 Animated.ValueXY 矢量动画 (03:27).mp4
 9-9 四种组合动画 (11:00).mp4
 9-

10 跟随动画延迟难题 (10:11).mp4
 9-

11 自定义 Modal 背景动画 (09:42).mp4
 9-

12 LayoutAnimation 超级简单又强大的布局动画 (19:50).mp4
 9-

13 课后作业练习 (03:15).mp4
 9-

14 内容小结 (02:31).mp4
 第10章 【小试牛刀-练习项目,账号密码本】巩固强化基础阶段知识 10-1 练习项目账号管理-演示与分析 (06:48).mp4
 10-2 初始化项目和页面框架 (16:33).mp4
 10-3 自定义封装添加账号弹窗 (46:37).mp4
 10-4 使用 UUID和AsyncStorage 保存账号数据 (18:19).mp4
 10-5 绘制账号列表 ui (25:08).mp4
 10-6 账号列表实现展开收起功能 (10:47).mp4
 10-7 添加账号后实时刷新列表 (03:47).mp4
 10-8 实现账号列表细节交互 (21:35).mp4
 10-9 项目打包发布 (05:37).mp4
 10-

10 本章小节 (01:32).mp4
 第11章 【练兵场-TypeScript快速进阶】掌握企业级开发的必备利器 11-1 TypeScript 介绍和优势 (03:41).mp4
 11-2 TypeScript 安装和项目配置 (06:18).mp4
 11-3 number、string、boolean 三大基础类型 (11:28).mp4
 11-4 数组、元组、枚举类型的使用 (10:46).mp4
 11-5 联合类型和字面量 (07:57).mp4
 11-6 函数类型 (06:31).mp4
 11-7 类型文件和命名空间 (07:21).mp4
 11-8 课后作业和本章总结 (01:33).mp4
 第12章 【进阶学习-Context上下文】深刻理解解耦的精髓 12-1 Context 上下文介绍和演示 (04:45).mp4
 12-2 Context 实例演示应用主题配置 (14:24).mp4
 12-3 Context 内容小结 (02:59).mp4
 第13章 【进阶学习-HOC高阶组件】掌握高阶组件强大的解耦和封装技巧 13-1 HOC 高阶组件介绍 (04:51).mp4
 13-2 HOC 高阶组件案例演示1 (15:26).mp4
 13-3 HOC 高阶组件案例演示2 (06:58).mp4
 13-4 课后作业和本章小结 (04:48).mp4
 第14章 【高手必学-memo与性能优化】掌握几种必备的memo应用技巧 14-1 memo 与性能优化 函数式组件和 class 组件拦截多余渲染的方法 (22:44).mp4
 14-2 使用 useMemo 缓存计算结果 (33:23).mp4
 14-3 useMemo 缓存 ui 以及 useCallback 缓存回调函数 (10:17).mp4
 14-4 Hermes 引擎 (03:14).mp4
 14-5 本章小结 (01:11).mp4
 第15章 【高手必学-ref转发】具备更强的自定义组件能力 15-1 Ref转发案例演示1 外层操作原始组件 (09:17).mp4
 15-2 Ref转发案例演示2 对外暴露api (15:41).mp4
 15-3 课后作业和本章小结 (01:47).mp4
 第16章 【高手必学-桥接原生】精通4种桥接方式,让RN能力无限延伸 16-1 桥接原生介绍 (03:09).mp4
 16-2 桥接原生实现JS调用原生方法 (17:15).mp4
 16-3 桥接原生实现JS层获取原生常量 (05:13).mp4
 16-4 桥接原生原子组件 实现原生组件 (11:47).mp4
 16-5 桥接原生原子组件 JS层调用原生组件 (07:03).mp4
 16-6 桥接原生原子组件 封装原生组件属性 (11:19).mp4
 16-7 桥接原生原子组件 原生事件回调 (17:39).mp4
 16-8 桥接原生原子组件 原生组件公开api给JS调用 (15:54).mp4
 16-9 桥接原生容器组件 (16:30).mp4
 16-

10 课后作业和本章小结 (01:39).mp4
 第17章 项目实战仿写小红书App【需求宣讲和前期准备】 17-1 实战仿写小红书 App 实战项目指导大纲 (04:40).mp4
 17-2 实战仿写小红书App 功能演示和需求梳理 (12:09).mp4
 17-3 实战仿写小红书App 项目初始化和资源准备 (11:55).mp4
 17-4 实战仿写小红书App 导入并配置TypeScript和AsyncStorage (09:23).mp4
 第18章 项目实战仿写小红书App【路由管理和欢迎登陆页面】 18-1 实战仿写小红书 App 路由管理安装和介绍 (09:24).mp4
 18-2 实战仿写小红书 App 构建导航栈并测试核心 Api (20:59).mp4
 18-3 实战仿写小红书 App 实现欢迎页面和快捷登陆页面 (42:13).mp4
 18-4 实战仿写小红书 App 实现账号密码登陆页面 (42:23).mp4
 18-5 实战仿写小红书 App 欢迎登陆首页三连跳 (05:20).mp4
 18-6 实战仿写小红书 App 登陆页面交互细节优化 (25:17).mp4
 第19章 实战项目-项目实战仿写小红书App【服务端接口与网络请求】 19-1 实战仿写小红书App-nodejs服务介绍及使用方法 (08:03).mp4
 19-2 实战仿写小红书App-封装Axios请求 (09:04).mp4
 19-3 实战仿写小红书App-封装接口配置 (08:15).mp4
 19-4 实战仿写小红书App-拦截接口响应 (05:52).mp4
 19-5 实战仿写小红书App-使用Mobx和缓存实现完整登陆流程 (23:26).mp4
 第20章 实战项目-项目实战仿写小红书App【构建应用自定义主Tab页】 20-1 实战仿写小红书App-构建基础底部Tab (19:56).mp4
 20-2 实战仿写小红书App-自定义底部TabBar样式 (15:53).mp4
 20-3 实战仿写小红书App-集成相册选择模块 (09:50).mp4
 第21章 实战项目-高仿商业级小红书 App【构建应用首页瀑布流列表】 21-1 实战仿写小红书App-搭建首页框架 (15:28).mp4
 21-2 实战仿写小红书App-实现列表显示和分页加载 (40:54).mp4
 21-3 实战仿写小红书App-实现瀑布流布局 (12:09).mp4
 21-4 实战仿写小红书App-自定义Heart实现点赞特效 (24:20).mp4
 21-5 实战仿写小红书App-封装TitleBar组件 (25:43).mp4
 21-6 实战仿写小红书app-封装CategoryList频道组件 (27:45).mp4
 21-7 实战仿写小红书App-自定义频道编辑弹窗 (33:48).mp4
 21-8 实战仿写小红书App-实现频道编辑数据修改 (21:53).mp4
 21-9 实战仿写小红书App-Toast和Loading小工具 (04:32).mp4
 第22章 实战项目-高仿商业级小红书 App【实现文章详情及评论区展示】 22-1 实战仿写小红书App-文章详情页面框架搭建 (13:38).mp4
 22-2 实战仿写小红书App-实现详情图片浏览 (25:30).mp4
 22-3 实战仿写小红书App-基本信息编写 (09:20).mp4
 22-4 实战仿写小红书App-嵌套评论列表1 (17:30).mp4
 22-5 实战仿写小红书App-嵌套评论列表2 (25:50).mp4
 22-6 实战仿写小红书App-嵌套评论列表3 (15:20).mp4
 第23章 实战项目-高仿商业级小红书 App【实现购物列表及搜索无缝切换】 23-1 实战仿写小红书App-实现商品列表 (30:24).mp4
 23-2 实战仿写小红书App-顶部Top10品类 (05:58).mp4
 23-3 实战仿写小红书App-实现无缝搜索切换 (16:32).mp4
 第24章 项目实战仿写小红书App【实现消息页面及气泡展示】 24-1 实战仿写小红书App-实现消息列表头部 (19:58).mp4
 24-2 实战仿写小红书App-实现消息列表展示 (15:43).mp4
 24-3 实战仿写小红书App-实现悬浮菜单效果 (14:28).mp4
 第25章 项目实战仿写小红书App【实现我的页面及侧拉菜单】 25-1 实战仿写小红书App-我的页面头部信息-1 (08:58).mp4
 25-2 实战仿写小红书App-我的页面头部信息-2 (25:40).mp4
 25-3 实战仿写小红书App-动态高度和Tab切换 (20:02).mp4
 25-4 实战仿写小红书App-列表渲染和空元素 (24:26).mp4
 25-5 实战仿写小红书App-实现侧拉菜单1 (18:31).mp4
 25-6 实战仿写小红书App-侧拉菜单与动效2 (21:27).mp4
 25-7 实战仿写小红书App-登陆流程闭环 (07:16).mp4
 第26章 项目实战仿写小红书App【项目发布与热修复实践】 26-1 热修复技术应用-RN热修复两大框架介绍 (10:19).mp4
 26-2 热修复技术应用-安装Pushy模块与创建应用 (11:46).mp4
 26-3 热修复技术应用-代码集成热修复加载流程 (17:11).mp4
 26-4 热修复技术应用-发布补丁并成功加载 (11:03).mp4
 26-5 热修复技术应用-6处流程细节优化 (14:00).mp4
 第27章 课程总结与未来展望 27-1 课程总结与未来展望 (07:35).mp4