首页 实战

RN从0到1系统精讲与小红书APP实战

30+小案例+2个实战项目，快人一步提升个职业竞争力

已完结
|
难度：中级
|
时长：共 40 小时
￥519
原价￥599.00
讲师宠粉福利
距离活动结束
立即购买
加购物车
已有 280 人在学
  • 从0到1构建完整 RN 技术体系
  • 快速积累大型项目实战经验
  • 30+ 小案例，2大项目强化训练
  • 快人一步跨进大前端行列
  • 综合提升跨平台技术应用能力
  • 手敲每行代码，听得懂学得会
试看本节课 10:32
试看本节课 01:57
试看本节课 03:59
1-1 课程导学
1-2 仿写小红书App效果演示
2-1 跨平台的优势和机遇，在移动端内卷的当下，只有跨平台才能破局重生

课程预览

检测到您还没有关注慕课网服务号，无法接收课程更新通知。请扫描二维码即可绑定
重新观看
无论你是移动端OR前端开发者，至少要掌握一门 跨平台技术，这是移动端和前端发展的必然趋势，企业更青睐有跨平台技术的人才。课程浓缩老师多年跨平台实战经验，通过30+小案例和账号密码本APP，带你从入门到进阶，体系化提升RN跨平台技术应用能力，最后再带你高仿一个真实的企业APP（小红书），让你具备企业级APP的跨平台落地能力。
展开所有

本章介绍：

本章介绍本套课程的学习内容、学习建议和注意事项，让学员有一个整体的认识。

第1章 【课程介绍】把握整套课程知识结构和大纲
5 节｜23分钟
展开
  • 视频：
    1-1 课程导学
    试看
    10:32
  • 视频：
    1-2 仿写小红书App效果演示
    试看
    01:57
  • 视频：
    1-3 课程大纲介绍，从整体上了解本套课程的学习内容
    05:17
  • 视频：
    1-4 课程知识导图展示，从框架上把握课程知识结构
    02:28
  • 视频：
    1-5 课程代码，及资料下载方法
    02:11

本章介绍：

当下跨平台开发已经成了大前端领域的趋势，我们在学习之前首先要了解跨平台的优势，以及在众多跨平台方案下为什么选择 ReactNative。

第2章 【学前准备】了解ReactNative优势和本套课程的学习目标
6 节｜15分钟
收起
  • 视频：
    2-1 跨平台的优势和机遇，在移动端内卷的当下，只有跨平台才能破局重生
    试看
    03:59
  • 视频：
    2-2 各种跨平台方案的百家争鸣
    01:47
  • 视频：
    2-3 ReactNative和Flutter的比较，客观比较两者优缺点，从需选择
    05:40
  • 视频：
    2-4 学习ReactNative的优势，增强学习本套课程的信心
    00:48
  • 视频：
    2-5 ReactNative大厂级应用
    00:51
  • 视频：
    2-6 本套课程的学习目标
    01:40

本章介绍：

RN的开发环境搭建相对复杂，本章帮大家梳理搭建开发环境的流程，并创建一个脚手架工程，运行官方demo，确认已具备所有的开发条件，准备正式学习。

第3章 【开发环境搭建和 demo 运行】为正式学习做好前期准备
8 节｜25分钟
收起
  • 视频：
    3-1 开发环境介绍：JS端环境+Native端环境
    03:28
  • 视频：
    3-2 安装node和watchman
    01:00
  • 视频：
    3-3 安装VSCode
    00:56
  • 视频：
    3-4 安装JDK和AndroidStudio
    01:45
  • 视频：
    3-5 安装sdk platform和sdk tools
    01:50
  • 视频：
    3-6 配置环境变量
    01:13
  • 视频：
    3-7 AndroidStudio创建模拟器，及m1芯片创建方法
    05:11
  • 视频：
    3-8 使用cli命令创建ReactNative工程，并启动运行
    08:41

本章介绍：

RN开发中使用的是前端开发语言，以及前端技术社区，而这些对于之前做前端开发的同学是陌生的，所以本章将学习一些前端领域基础知识，为RN学习做好铺垫。

第4章 为“原生开发”同学补充前端基础
6 节｜62分钟
展开
  • 视频：
    4-1 学习js的基本使用，了解如何申明变量、函数、以及js的一些基本特性
    13:02
  • 视频：
    4-2 了解什么是ES5、ES6，掌握ES6常用的一些方法
    26:15
  • 视频：
    4-3 了解什么是babel以及常见的配置
    04:22
  • 视频：
    4-4 学习CSS-flex布局基础，为后面正式学习rn布局打下基础
    12:49
  • 视频：
    4-5 npm是什么？npm如何检索、安装和卸载
    02:45
  • 视频：
    4-6 使用nrm管理npm源
    02:44

本章介绍：

RN开发本质上是移动端开发，而对于之前做前端开发的同学又是一个新的领域，所以有必要提前了解一些移动端基础知识。

第5章 为“前端开发”同学补充原生基础
8 节｜55分钟
展开
  • 视频：
    5-1 如何连接安卓设备以及开发中常用的adb命令
    13:43
  • 视频：
    5-2 移动端ui结构和设备特性
    06:11
  • 视频：
    5-3 RN开发中常见的原生文件
    10:38
  • 视频：
    5-4 RN和原生组件对应关系
    02:35
  • 视频：
    5-5 原生开发语言选择
    03:16
  • 视频：
    5-6 移动端应用发布及主流的应用市场
    07:04
  • 视频：
    5-7 移动端特有的生产热修复机制和应用场景
    07:29
  • 视频：
    5-8 移动端设备的版本兼容选择
    03:24

本章介绍：

学习ReactNative之前，必须先了解工程的基础结构，掌握整体框架。同时，ReactNative是基于React，所以必须先学习必备的 React 知识，为后续学习打下基础。

第6章 【React基础知识和工程结构】掌握核心文件的用法和职能
9 节｜149分钟
展开
  • 视频：
    6-1 工程目录结构，了解关键文件作用
    13:02
  • 视频：
    6-2 构建通用源码目录结构，好的工程从模块划分开始
    07:06
  • 视频：
    6-3 package.json全局大管家文件
    14:11
  • 视频：
    6-4 import和export，三种导入导出类型
    09:58
  • 视频：
    6-5 class组件的标准写法和生命周期
    23:52
  • 视频：
    6-6 函数式组件的优势和常用hook
    31:38
  • 视频：
    6-7 JSX语法：高效开发源自于此
    38:53
  • 视频：
    6-8 课后练习：RN计数器
    03:16
  • 视频：
    6-9 作业答疑
    07:00

本章介绍：

任何一个前端框架核心都是ui构建能力，本章将系统学习RN提供的ui组件，了解每种组件的详细使用方法，以及应用场景，通过本章的学习将掌握全面的ui布局能力。

第7章 【夯实基础－系统组件精讲】全面掌握系统组件的使用方法以及各种属性的应用场景
20 节｜382分钟
展开
  • 视频：
    7-1 章节内容介绍
    05:11
  • 视频：
    7-2 View：ui构建的基石，一切页面的起点
    37:04
  • 视频：
    7-3 Text 使用占比最高的组件，使用简单，深入复杂
    34:48
  • 视频：
    7-4 Image构建精美ui
    29:24
  • 视频：
    7-5 ImageBackground-View和Image的结合
    19:39
  • 视频：
    7-6 TextInput唯一且强大的输入组件
    35:21
  • 视频：
    7-7 TouchableOpacity最好用的点击组件
    13:37
  • 视频：
    7-8 TouchableHighlight使用略显麻烦的点击组件
    06:40
  • 视频：
    7-9 TouchbaleWithoutFeedback几乎不用的点击组件
    04:19
  • 视频：
    7-10 Button 使用简单但样式固定
    05:48
  • 视频：
    7-11 强大的 Pressable
    13:44
  • 视频：
    7-12 ScrollView 基础滚动组件
    42:10
  • 视频：
    7-13 FlatList 高性能列表组件
    40:49
  • 视频：
    7-14 SectionList 多类型分组列表
    21:50
  • 视频：
    7-15 RefreshControl 下拉刷新
    09:01
  • 视频：
    7-16 Modal 自定义弹窗
    24:01
  • 视频：
    7-17 StatusBar 适配状态栏
    11:04
  • 视频：
    7-18 Switch 开关切换
    08:22
  • 视频：
    7-19 课后作业个人信息页面练习
    05:28
  • 视频：
    7-20 作业答疑
    13:17

本章介绍：

和UI组件同样重要的是系统　API，RN 提供了很多系统 API 可以降低开发难度，辅助构建UI，甚至是调用原生能力，本章将学习系统 API 的功能和使用方法。

第8章 【夯实基础-常用API】深刻理解RN核心API的功能
14 节｜150分钟
展开
  • 视频：
    8-1 章节内容介绍
    04:52
  • 视频：
    8-2 alert 和 console 你不知道的调试小技巧
    28:45
  • 视频：
    8-3 Dimension 和 useWindowDimension 获取屏幕信息
    13:04
  • 视频：
    8-4 Platform 获取平台属性
    09:55
  • 视频：
    8-5 StyleSheet 构建灵活样式表
    11:44
  • 视频：
    8-6 Linking 一个 api 节省 50 行代码
    23:14
  • 视频：
    8-7 PixelRatio 像素比例工具
    09:11
  • 视频：
    8-8 BackHandler 安卓返回键适配
    07:53
  • 视频：
    8-9 PermissionsAndroid 轻松解决权限问题
    08:39
  • 视频：
    8-10 Vibration 简单好用的震动交互
    07:30
  • 视频：
    8-11 ToastAndroid 安卓平台的提示
    05:35
  • 视频：
    8-12 Transform 矩阵变换的伪3D效果
    10:26
  • 视频：
    8-13 Keyboard 键盘操作有神器
    06:44
  • 视频：
    8-14 课后作业和本章小结
    01:46

本章介绍：

动画对于前端ui表现力起到的作用非常大，好的动画可以提升页面的表现力，传达交互逻辑，本章将学习RN动画构建方式。

第9章 【夯实基础-RN动画系统】全面掌握RN动画所有技巧，挑战90%动画效果
14 节｜130分钟
展开
  • 视频：
    9-1 简单示例学习基础动画方法
    13:01
  • 视频：
    9-2 四大动画类型
    12:29
  • 视频：
    9-3 六种支持动画的组件
    03:05
  • 视频：
    9-4 平移动画的多种属性支持
    04:05
  • 视频：
    9-5 Animated.decay 衰减动画函数
    06:21
  • 视频：
    9-6 Animated.spring 弹性动画函数
    14:17
  • 视频：
    9-7 Animated.timing 时间动画函数
    16:13
  • 视频：
    9-8 Animated.ValueXY 矢量动画
    03:27
  • 视频：
    9-9 四种组合动画
    11:00
  • 视频：
    9-10 跟随动画延迟难题
    10:11
  • 视频：
    9-11 自定义 Modal 背景动画
    09:42
  • 视频：
    9-12 LayoutAnimation 超级简单又强大的布局动画
    19:50
  • 视频：
    9-13 课后作业练习
    03:15
  • 视频：
    9-14 内容小结
    02:31

本章介绍：

经过前面的学习，我们已经具备了基础的RN开发能力，为了巩固知识，温故知新，本章将一起做一个简单的项目，感受下RN的开发魅力吧。

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

本章介绍：

在企业级开发中，很少直接使用JS作为开发语言，而是使用更安装、更好维护的TS，本章将学习TS的使用方法，了解多种类型定义、申明，编写更好维护的代码。

第11章 【练兵场-TypeScript快速进阶】掌握企业级开发的必备利器
8 节｜56分钟
展开
  • 视频：
    11-1 TypeScript 介绍和优势
    03:41
  • 视频：
    11-2 TypeScript 安装和项目配置
    06:18
  • 视频：
    11-3 number、string、boolean 三大基础类型
    11:28
  • 视频：
    11-4 数组、元组、枚举类型的使用
    10:46
  • 视频：
    11-5 联合类型和字面量
    07:57
  • 视频：
    11-6 函数类型
    06:31
  • 视频：
    11-7 类型文件和命名空间
    07:21
  • 视频：
    11-8 课后作业和本章总结
    01:33

本章介绍：

Context作为React的进阶知识，在RN中也经常用到，它可以在特定场景下用巧妙解耦的方式传递参数。

第12章 【进阶学习-Context上下文】深刻理解解耦的精髓
3 节｜23分钟
展开
  • 视频：
    12-1 Context 上下文介绍和演示
    04:45
  • 视频：
    12-2 Context 实例演示应用主题配置
    14:24
  • 视频：
    12-3 Context 内容小结
    02:59

本章介绍：

高阶组件是React重要的复用和解耦的技巧，它解决的是横切关注点问题，本章将学习高阶组件的用法。

第13章 【进阶学习-HOC高阶组件】掌握高阶组件强大的解耦和封装技巧
4 节｜33分钟
展开
  • 视频：
    13-1 HOC 高阶组件介绍
    04:51
  • 视频：
    13-2 HOC 高阶组件案例演示1
    15:26
  • 视频：
    13-3 HOC 高阶组件案例演示2
    06:58
  • 视频：
    13-4 课后作业和本章小结
    04:48

本章介绍：

当功能日趋复杂，页面性能优化就是一个重要事项，本章将学习memo的用法，帮助我们在构建ui时提升页面渲染性能。

第14章 【高手必学-memo与性能优化】掌握几种必备的memo应用技巧
5 节｜71分钟
展开
  • 视频：
    14-1 memo 与性能优化 函数式组件和 class 组件拦截多余渲染的方法
    22:44
  • 视频：
    14-2 使用 useMemo 缓存计算结果
    33:23
  • 视频：
    14-3 useMemo 缓存 ui 以及 useCallback 缓存回调函数
    10:17
  • 视频：
    14-4 Hermes 引擎
    03:14
  • 视频：
    14-5 本章小结
    01:11

本章介绍：

在自定义组件时，常常会遇到组件ref指向问题，本章学习ref转发的使用方法，将有利于实现更好的自定义组件。

第15章 【高手必学-ref转发】具备更强的自定义组件能力
3 节｜27分钟
展开
  • 视频：
    15-1 Ref转发案例演示1 外层操作原始组件
    09:17
  • 视频：
    15-2 Ref转发案例演示2 对外暴露api
    15:41
  • 视频：
    15-3 课后作业和本章小结
    01:47

本章介绍：

RN作为跨平台框架，系统提供了部分原生能力，但是当系统组件和系统api不能满足需求时，就需要自己开发桥接原生组件和模块，这部分难度较大，本章将带大家一起梳理桥接原生有哪些类型，由浅入深的学习多种桥接原生实现方法。

第16章 【高手必学-桥接原生】精通4种桥接方式，让RN能力无限延伸
10 节｜108分钟
展开
  • 视频：
    16-1 桥接原生介绍
    03:09
  • 视频：
    16-2 桥接原生实现JS调用原生方法
    17:15
  • 视频：
    16-3 桥接原生实现JS层获取原生常量
    05:13
  • 视频：
    16-4 桥接原生原子组件 实现原生组件
    11:47
  • 视频：
    16-5 桥接原生原子组件 JS层调用原生组件
    07:03
  • 视频：
    16-6 桥接原生原子组件 封装原生组件属性
    11:19
  • 视频：
    16-7 桥接原生原子组件 原生事件回调
    17:39
  • 视频：
    16-8 桥接原生原子组件 原生组件公开api给JS调用
    15:54
  • 视频：
    16-9 桥接原生容器组件
    16:30
  • 视频：
    16-10 课后作业和本章小结
    01:39

本章介绍：

需求宣讲和前期准备，了解实战项目指导思想模拟需求宣讲过程并做前期准备。

第17章 项目实战仿写小红书App【需求宣讲和前期准备】
4 节｜39分钟
展开
  • 视频：
    17-1 实战仿写小红书 App 实战项目指导大纲
    04:40
  • 视频：
    17-2 实战仿写小红书App 功能演示和需求梳理
    12:09
  • 视频：
    17-3 实战仿写小红书App 项目初始化和资源准备
    11:55
  • 视频：
    17-4 实战仿写小红书App 导入并配置TypeScript和AsyncStorage
    09:23

本章介绍：

实现路由管理和欢迎登陆页面开发。

第18章 项目实战仿写小红书App【路由管理和欢迎登陆页面】
6 节｜146分钟
展开
  • 视频：
    18-1 实战仿写小红书 App 路由管理安装和介绍
    09:24
  • 视频：
    18-2 实战仿写小红书 App 构建导航栈并测试核心 Api
    20:59
  • 视频：
    18-3 实战仿写小红书 App 实现欢迎页面和快捷登陆页面
    42:13
  • 视频：
    18-4 实战仿写小红书 App 实现账号密码登陆页面
    42:23
  • 视频：
    18-5 实战仿写小红书 App 欢迎登陆首页三连跳
    05:20
  • 视频：
    18-6 实战仿写小红书 App 登陆页面交互细节优化
    25:17

本章介绍：

服务端接口与网络请求开发。

第19章 实战项目-项目实战仿写小红书App【服务端接口与网络请求】
5 节｜55分钟
展开
  • 视频：
    19-1 实战仿写小红书App-nodejs服务介绍及使用方法
    08:03
  • 视频：
    19-2 实战仿写小红书App-封装Axios请求
    09:04
  • 视频：
    19-3 实战仿写小红书App-封装接口配置
    08:15
  • 视频：
    19-4 实战仿写小红书App-拦截接口响应
    05:52
  • 视频：
    19-5 实战仿写小红书App-使用Mobx和缓存实现完整登陆流程
    23:26

本章介绍：

构建应用自定义主Tab页开发。

第20章 实战项目-项目实战仿写小红书App【构建应用自定义主Tab页】
3 节｜46分钟
展开
  • 视频：
    20-1 实战仿写小红书App-构建基础底部Tab
    19:56
  • 视频：
    20-2 实战仿写小红书App-自定义底部TabBar样式
    15:53
  • 视频：
    20-3 实战仿写小红书App-集成相册选择模块
    09:50

本章介绍：

构建应用首页瀑布流列表页面开发。

第21章 实战项目-高仿商业级小红书 App【构建应用首页瀑布流列表】
9 节｜207分钟
展开
  • 视频：
    21-1 实战仿写小红书App-搭建首页框架
    15:28
  • 视频：
    21-2 实战仿写小红书App-实现列表显示和分页加载
    40:54
  • 视频：
    21-3 实战仿写小红书App-实现瀑布流布局
    12:09
  • 视频：
    21-4 实战仿写小红书App-自定义Heart实现点赞特效
    24:20
  • 视频：
    21-5 实战仿写小红书App-封装TitleBar组件
    25:43
  • 视频：
    21-6 实战仿写小红书app-封装CategoryList频道组件
    27:45
  • 视频：
    21-7 实战仿写小红书App-自定义频道编辑弹窗
    33:48
  • 视频：
    21-8 实战仿写小红书App-实现频道编辑数据修改
    21:53
  • 视频：
    21-9 实战仿写小红书App-Toast和Loading小工具
    04:32

本章介绍：

文章详情页页开发。

第22章 实战项目-高仿商业级小红书 App【实现文章详情及评论区展示】
6 节｜108分钟
展开
  • 视频：
    22-1 实战仿写小红书App-文章详情页面框架搭建
    13:38
  • 视频：
    22-2 实战仿写小红书App-实现详情图片浏览
    25:30
  • 视频：
    22-3 实战仿写小红书App-基本信息编写
    09:20
  • 视频：
    22-4 实战仿写小红书App-嵌套评论列表1
    17:30
  • 视频：
    22-5 实战仿写小红书App-嵌套评论列表2
    25:50
  • 视频：
    22-6 实战仿写小红书App-嵌套评论列表3
    15:20

本章介绍：

实现购物列表及搜索无缝切换功能开发。

第23章 实战项目-高仿商业级小红书 App【实现购物列表及搜索无缝切换】
3 节｜53分钟
展开
  • 视频：
    23-1 实战仿写小红书App-实现商品列表
    30:24
  • 视频：
    23-2 实战仿写小红书App-顶部Top10品类
    05:58
  • 视频：
    23-3 实战仿写小红书App-实现无缝搜索切换
    16:32

本章介绍：

实现消息页面及气泡展示功能。

第24章 项目实战仿写小红书App【实现消息页面及气泡展示】
3 节｜51分钟
展开
  • 视频：
    24-1 实战仿写小红书App-实现消息列表头部
    19:58
  • 视频：
    24-2 实战仿写小红书App-实现消息列表展示
    15:43
  • 视频：
    24-3 实战仿写小红书App-实现悬浮菜单效果
    14:28

本章介绍：

实现我的页面及侧拉菜单功能。

第25章 项目实战仿写小红书App【实现我的页面及侧拉菜单】
7 节｜127分钟
展开
  • 视频：
    25-1 实战仿写小红书App-我的页面头部信息-1
    08:58
  • 视频：
    25-2 实战仿写小红书App-我的页面头部信息-2
    25:40
  • 视频：
    25-3 实战仿写小红书App-动态高度和Tab切换
    20:02
  • 视频：
    25-4 实战仿写小红书App-列表渲染和空元素
    24:26
  • 视频：
    25-5 实战仿写小红书App-实现侧拉菜单1
    18:31
  • 视频：
    25-6 实战仿写小红书App-侧拉菜单与动效2
    21:27
  • 视频：
    25-7 实战仿写小红书App-登陆流程闭环
    07:16

本章介绍：

项目发布与热修复实践开发。

第26章 项目实战仿写小红书App【项目发布与热修复实践】
5 节｜65分钟
展开
  • 视频：
    26-1 热修复技术应用-RN热修复两大框架介绍
    10:19
  • 视频：
    26-2 热修复技术应用-安装Pushy模块与创建应用
    11:46
  • 视频：
    26-3 热修复技术应用-代码集成热修复加载流程
    17:11
  • 视频：
    26-4 热修复技术应用-发布补丁并成功加载
    11:03
  • 视频：
    26-5 热修复技术应用-6处流程细节优化
    14:00

本章介绍：

课程总结与对未来展望。

第27章 课程总结与未来展望
1 节｜8分钟
展开
  • 视频：
    27-1 课程总结与未来展望
    07:35
本课程已完结
适合人群
从事原生端开发想转跨平台的同学
从事前端开发想涉及移动端的同学
对跨平台技术、或大前端领域感兴趣的同学
技术储备
JavaScript 基础
Java/kotlin/OC
环境参数
Node 16
node 18
ES 5
ES 6
Java 11
FE大公爵
前端技术负责人， 已有1954个学生
不为别的，只为提升面试通过率
尽管课程时间很长，
但没关系，我们有老师的陪伴，
还有同学之间互相鼓励，彼此帮助，
完成学习后，还能获得慕课网官方认证的证书。
立即购买
一站式掌握跨平台开发
套餐价格：¥898.00
2门课 总价：¥998.00
立即购买
 课程介绍

RN从0到1系统精讲与小红书APP实战

中级  · 280人报名 ¥599.00
课程介绍 

基于Flutter 3.x 实战跨平台仿抖音App混合开发

初级  · 467人报名 ¥399.00
React一站式打通Web&移动端
套餐价格：¥1,438.00
2门课 总价：¥1,598.00
立即购买
 课程介绍

RN从0到1系统精讲与小红书APP实战

中级  · 280人报名 ¥599.00
课程介绍 

2024版，React18+ Nest.js 全栈开发仿问卷星项目

中级  · 366人报名 ¥999.00
查看更多
数据加载中...
查看更多好课
《RN从0到1系统精讲与小红书APP实战》的真实评价
综合评分：分，共 人参与
篇幅原因，只展示最近100条评价
讲师宠粉福利
￥519
￥599.00
立即购买
加购物车

学习咨询

选课、学习遇到问题？

扫码添加指导老师 1V1 帮助你！

添加后老师会第一时间解决你的问题

意见反馈 帮助中心 APP下载
官方微信