收藏

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

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

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

优惠到手 499
原价¥599.00
满1788减540 满1188减320 满888减220 满688减150 满488减100 满288减50 满188减20

更多

已完结 难度 中级 时长 40小时 学习人数 317 综合评分 9.53
  • 第1章 【课程介绍】把握整套课程知识结构和大纲 试看 5 节 | 23分钟

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

    收起列表

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

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

    收起列表

    • 视频: 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)
  • 第3章 【开发环境搭建和 demo 运行】为正式学习做好前期准备 8 节 | 25分钟

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

    收起列表

    • 视频: 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)
  • 第4章 为“原生开发”同学补充前端基础 6 节 | 62分钟

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

    收起列表

    • 视频: 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)
  • 第5章 为“前端开发”同学补充原生基础 8 节 | 55分钟

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

    收起列表

    • 视频: 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)
  • 第6章 【React基础知识和工程结构】掌握核心文件的用法和职能 9 节 | 149分钟

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

    收起列表

    • 视频: 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)
  • 第7章 【夯实基础-系统组件精讲】全面掌握系统组件的使用方法以及各种属性的应用场景 20 节 | 382分钟

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

    收起列表

    • 视频: 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)
  • 第8章 【夯实基础-常用API】深刻理解RN核心API的功能 14 节 | 150分钟

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

    收起列表

    • 视频: 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)
  • 第9章 【夯实基础-RN动画系统】全面掌握RN动画所有技巧,挑战90%动画效果 14 节 | 130分钟

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

    收起列表

    • 视频: 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)
  • 第10章 【小试牛刀-练习项目,账号密码本】巩固强化基础阶段知识 10 节 | 157分钟

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

    收起列表

    • 视频: 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)
  • 第11章 【练兵场-TypeScript快速进阶】掌握企业级开发的必备利器 8 节 | 56分钟

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

    收起列表

    • 视频: 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)
  • 第12章 【进阶学习-Context上下文】深刻理解解耦的精髓 3 节 | 23分钟

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

    收起列表

    • 视频: 12-1 Context 上下文介绍和演示 (04:45)
    • 视频: 12-2 Context 实例演示应用主题配置 (14:24)
    • 视频: 12-3 Context 内容小结 (02:59)
  • 第13章 【进阶学习-HOC高阶组件】掌握高阶组件强大的解耦和封装技巧 4 节 | 33分钟

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

    收起列表

    • 视频: 13-1 HOC 高阶组件介绍 (04:51)
    • 视频: 13-2 HOC 高阶组件案例演示1 (15:26)
    • 视频: 13-3 HOC 高阶组件案例演示2 (06:58)
    • 视频: 13-4 课后作业和本章小结 (04:48)
  • 第14章 【高手必学-memo与性能优化】掌握几种必备的memo应用技巧 5 节 | 71分钟

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

    收起列表

    • 视频: 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)
  • 第15章 【高手必学-ref转发】具备更强的自定义组件能力 3 节 | 27分钟

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

    收起列表

    • 视频: 15-1 Ref转发案例演示1 外层操作原始组件 (09:17)
    • 视频: 15-2 Ref转发案例演示2 对外暴露api (15:41)
    • 视频: 15-3 课后作业和本章小结 (01:47)
  • 第16章 【高手必学-桥接原生】精通4种桥接方式,让RN能力无限延伸 10 节 | 108分钟

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

    收起列表

    • 视频: 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)
  • 第20章 实战项目-项目实战仿写小红书App【构建应用自定义主Tab页】 3 节 | 46分钟

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

    收起列表

    • 视频: 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)
本课程已完结

试看

全部试看小节



讲师

FE大公爵 架构师

10年大前端开发生涯,从一线开发到技术Leader到团队管理,先后涉及Android原生、ReactNative、React-web、小程序等多个大前端技术领域,主导过多个互联网项目全生命周期研发工作,现就职于国内一线互联网SaaS企业。对大前端技术有敏锐的洞察力和深刻理解。

课程预览

检测到您还没有关注慕课网服务号,无法接收课程更新通知。请扫描二维码即可绑定
重新观看
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号

学习咨询

选课、学习遇到问题?

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

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