reactNative+TypeScript仿喜马拉雅开发App
融合RN的跨平台能力＋TS的全新开发体验
使用RN + TS开发听书App，通过导航器、dva状态管理、图标生成组件、自定义导航器、动画效果、音视频的播放、动态导航和动态model、本地数据持久化等一系列的功能，完成RN的技术落地。
适合人群
由于公司业务需要，需要学习跨平台开发的技能党
想要自己开发独立应用的个人开发者
想知道怎么在RN项目中使用TypeScript的工程师
技术储备要求
具备javaScript，ES6，React 前端基础
试看链接：
相关推荐：
章节目录：
-
第1章 课程介绍 试看1 节 | 17分钟
本课程主要介绍为什么要使用React Native + TypeScript开发应用。
- 视频：1-1 课程导学 (16:17)试看
-
第2章 ES6、React、React Native基础知识串讲21 节 | 287分钟
本章会讲解学习这门课程之前必备的基础知识，主要讲解ES6、RN等必备知识点，专门为新手学员准备的，这些内容在后面的实战中都会用到。
- 视频：2-1 环境搭建 (13:04)
- 视频：2-2 android开发环境搭建 (12:25)
- 视频：2-3 创建项目 (09:20)
- 视频：2-4 ES6之简介及变量声明 (14:00)
- 视频：2-5 ES6之模板字符串和函数默认参数 (21:19)
- 视频：2-6 ES6之箭头函数 (09:35)
- 视频：2-7 ES6之解构赋值、对象字面量、展开语法、剩余语法 (17:34)
- 视频：2-8 ES6之class (28:42)
- 视频：2-9 ES6之class继承 (15:14)
- 视频：2-10 promise知识讲解 (28:40)
- 视频：2-11 ES6之generator (23:29)
- 视频：2-12 ES6之模块 (03:51)
- 视频：2-13 React基础 (16:26)
- 视频：2-14 RN基础知识之RN介绍 (12:10)
- 视频：2-15 RN基础知识之宽高 (03:27)
- 视频：2-16 RN基础知识之基础组件与样式 (07:32)
- 视频：2-17 RN布局（1） (11:22)
- 视频：2-18 RN布局（2） (14:04)
- 视频：2-19 RN基础之触摸事件 (12:38)
- 视频：2-20 RN基础之网络请求 (12:03)
- 作业：2-21 【讨论题】谈谈你对JSX得理解
-
第3章 TypeScript基础知识5 节 | 43分钟
本章会讲解学习这门课程之前必备的基础知识，主要讲解TS的必备知识点，专门为新手学员准备的，这些内容在后面的实战中都会用到。
- 视频：3-1 TypeScript之简介 (11:35)
- 视频：3-2 TypeScript之非原始类型 (08:25)
- 视频：3-3 TypeScript之函数 (05:14)
- 视频：3-4 TypeScript之接口 (13:31)
- 视频：3-5 TypeScript之泛型 (03:41)
-
第4章 项目分析1 节 | 11分钟
本章主要对这门课程需要制作的听书应用的分析，讲解整个项目的流程，对本门课程的应用进行需求、模块、技术的分析
- 视频：4-1 项目分析 (10:03)
-
第5章 项目初始化3 节 | 27分钟
本章才算是正式开始应用的开发了。还有我在工作中用到的两个非常好的第三方项目，可以做到多环境设置和绝对路径的设置，能帮助我们减少一些繁琐枯燥又容易出错的工作。
- 视频：5-1 项目初始化 (05:48)
- 视频：5-2 多环境 (07:43)
- 视频：5-3 绝对路径 (13:26)
-
第6章 接口管理工具1 节 | 17分钟
本章主要学习如何在本地部署yapi，以及yapi的基本使用方法
- 视频：6-1 接口文档 (16:06)
-
第7章 新版导航器React-Navigation5.05 节 | 73分钟
本章主要讲解5.0版本的react-navigation，堆栈式和底部标签导航器的基本配置和使用
- 视频：7-1 导航器基本介绍 (03:48)
- 视频：7-2 安装导航器 (08:23)
- 视频：7-3 堆栈式导航器（1） (18:12)
- 视频：7-4 堆栈式导航器（2） (18:12)
- 视频：7-5 标签导航器 (24:06)
-
第8章 状态管理Dva 试看8 节 | 69分钟
本章主要讲解Redux和redux-saga的封装库dva，以及dva和react-native的集成以及插件loading
- 视频：8-1 状态管理基础介绍(redux) (19:42)试看
- 视频：8-2 状态管理基础介绍(redux-saga) (10:30)试看
- 视频：8-3 集成Dva-core (15:51)
- 视频：8-4 Dva基础使用方法 (10:12)
- 视频：8-5 Dva异步操作 (04:29)
- 视频：8-6 Dva插件dva-loading (07:46)
- 作业：8-7 【学习任务】react-redux中的connect应用
- 作业：8-8 【讨论题】关于高阶组件和redux得理解
-
第9章 首页模块18 节 | 278分钟
这一章才算是正式开始了业务逻辑的开发，本章会教大家完成首页模块的功能，如轮播图、渐变色，接口请求、自定义顶部标签导航器的标签栏
- 视频：9-1 首页展示与功能分析 (03:29)
- 视频：9-2 底部标签导航器字体图标 (13:05)
- 视频：9-3 顶部标签导航器 (13:20)
- 视频：9-4 轮播图 上 (18:00)
- 视频：9-5 轮播图 下 (16:26)
- 视频：9-6 网络请求到数据，通过dva映射到组件 (28:11)
- 视频：9-7 猜你喜欢 上 (21:27)
- 视频：9-8 猜你喜欢 下 (20:08)
- 视频：9-9 首页列表（1） (14:00)
- 视频：9-10 首页列表（2） (19:41)
- 视频：9-11 首页列表优化与课后作业 (11:49)
- 视频：9-12 下拉刷新 (07:44)
- 视频：9-13 上拉加载更多 (23:53)
- 视频：9-14 自定义顶部标签组件 (13:37)
- 视频：9-15 自定义顶部标签组件布局 (12:16)
- 视频：9-16 自定义顶部标签组件渐变色效果 (16:21)
- 视频：9-17 自定义顶部标签渐变色组件显隐 (17:36)
- 视频：9-18 自定义组件的完善 (06:54)
-
第10章 分类模块13 节 | 136分钟
本章主要会通过dva状态管理库来完成类别的增删改查功能以及拓展排序的功能，通过这几个经典业务逻辑帮助大家更好的掌握dva库，另外会学习动态的顶部标签导航器和动态的生成dva的model的功能。
- 视频：10-1 类别模块功能演示和分析 (01:56)
- 视频：10-2 数据结构和本地数据存储 (09:18)
- 视频：10-3 类别模块的model (16:34)
- 视频：10-4 类别页面的布局和样式（1） (17:29)
- 视频：10-5 类别页面的布局和样式（2） (11:53)
- 视频：10-6 添加标题栏右上角按钮以及切换编辑状态 (18:17)
- 视频：10-7 新增类别和删除类别（1） (11:38)
- 视频：10-8 新增类别和删除类别（2） (10:21)
- 视频：10-9 类别的拖拽功能 (11:22)
- 视频：10-10 动态生成标签导航器和model（1） (12:11)
- 视频：10-11 动态生成标签导航器和model（2） (13:07)
- 视频：10-12 课后作业 (01:11)
- 作业：10-13 【学习任务】是否可以通过其他方式实现动态顶部标签导航器
-
第11章 频道模块12 节 | 186分钟
本章主要学习手势响应系统，通过手势响应系统实现当头部可见时，手指向上滑动时，tab标签组件中的FlatList无法滚动，逐渐滑动到头部组件不可见时，tab标签组件中的FlatList才能滚动的效果；当头部不可见时，手指向下滑动时，直到FlatList滚动到最顶部时，头部才可以滑动的效果，而且根据这个滚动，标签栏也会有淡入淡出的动…
- 视频：11-1 频道模块的功能演示和分析 (01:54)
- 视频：11-2 yapi创建接口和model (16:45)
- 视频：11-3 频道信息组件（上） (20:59)
- 视频：11-4 频道信息组件（下） (24:22)
- 视频：11-5 频道页面Tab标签（上） (17:32)
- 视频：11-6 频道页面Tab标签（下） (24:57)
- 视频：11-7 react-native的动画 (10:12)
- 视频：11-8 手势响应系统（1） (16:07)
- 视频：11-9 手势响应系统（2） (07:38)
- 视频：11-10 手势响应系统（3） (13:12)
- 视频：11-11 手势响应系统（4） (21:15)
- 视频：11-12 react-native-tab-view组件的优化以及课后作业 (10:12)
-
第12章 频道详情模块17 节 | 184分钟
本章主要学习音频的播放，而且通过进度条显示当前音频的播放时长，以及上一首、下一首、播放、暂停的功能和弹幕
- 视频：12-1 频道详情页面的功能介绍和分析 (01:35)
- 视频：12-2 导航器的全屏模式（上） (12:08)
- 视频：12-3 导航器的全屏模式（下） (09:37)
- 视频：12-4 音频播放（1） (09:14)
- 视频：12-5 音频播放（2） (10:19)
- 视频：12-6 音频播放（3） (09:25)
- 视频：12-7 音频播放（4） (09:30)
- 视频：12-8 暂停以及进度条展示播放时间（上） (13:27)
- 视频：12-9 暂停以及进度条展示播放时间（下） (14:32)
- 视频：12-10 上一首下一首功能（上） (12:26)
- 视频：12-11 上一首下一首功能（下） (15:11)
- 视频：12-12 图片的缩放和渐变色 (18:42)
- 视频：12-13 弹幕 （1） (11:18)
- 视频：12-14 弹幕（2） (11:16)
- 视频：12-15 弹幕（3） (10:39)
- 视频：12-16 弹幕（4） (13:06)
- 视频：12-17 课后练习 (00:38)
-
第13章 底部标签导航器的播放标签以及脱离导航器之外的播放按钮6 节 | 59分钟
本章主要学习如何在导航器之外展示一个独立的组件，而且有播放动画效果。并且会根据页面和播放的状态判断是否显示
- 视频：13-1 底部标签播放按钮的功能介绍和分析 (01:10)
- 视频：13-2 自定义底部标签按钮（上） (14:23)
- 视频：13-3 自定义底部标签按钮（下） (12:20)
- 视频：13-4 页面之外的播放按钮 (17:38)
- 视频：13-5 播放按钮的跳转功能 (12:18)
- 视频：13-6 课后练习 (00:23)
-
第14章 我听模块7 节 | 47分钟
本章主要学习本地数据持久化，realmjs的使用，通过记录用户曾经播放过的音频以及播放到的时间，然后以列表的形式展示出来。
- 视频：14-1 我听模块的功能展示和分析 (02:41)
- 视频：14-2 安装realm (13:04)
- 视频：14-3 保存播放的音频 (07:06)
- 视频：14-4 查询realm数据 (13:26)
- 视频：14-5 删除realm数据 (04:16)
- 视频：14-6 更新表结构以及迁移数据 (06:22)
- 作业：14-7 【学习任务】在react native中如何实现本地存储数据
-
第15章 发现模块6 节 | 30分钟
本章主要学习在FlatList中展示视频，以及视频的播放功能。并且同一时间只能播放一个视频，需要做一些优化，并且在播放视频时需要暂停音频。
- 视频：15-1 发现页面的功能介绍和分析 (00:37)
- 视频：15-2 发现模块的model (06:18)
- 视频：15-3 FlatList展示视频 (14:12)
- 视频：15-4 暂停其他视频和音频的播放 (08:14)
- 视频：15-5 课后练习 (00:39)
- 作业：15-6 【学习任务】在react native中如何实现本地存储数据
-
第16章 账号模块10 节 | 106分钟
本章主要学习表单的校验和提交，并且需要保存登录状态，这样用户在以后进入应用时，就不会再次提醒需要登录了。
- 视频：16-1 账号模块的功能展示和分析 (02:26)
- 视频：16-2 账号模块的model (08:41)
- 视频：16-3 我的页面ui以及跳转功能 (14:29)
- 视频：16-4 登录页面表单组件Formik (14:25)
- 视频：16-5 表单校验库yup (07:04)
- 视频：16-6 封装表单输入框 (15:37)
- 视频：16-7 显示用户信息以及保存登录状态（上） (13:30)
- 视频：16-8 显示用户信息以及保存登录状态（下） (13:23)
- 视频：16-9 功能完善和课后练习 (16:05)
- 作业：16-10 【讨论题】关于React Native的优缺点？
-
第17章 打包发布10 节 | 98分钟
本章主要学习应用的打包和发布。
- 视频：17-1 启动页之android配置 (16:45)
- 视频：17-2 启动页之ios配置 (06:31)
- 视频：17-3 Android应用图标以及配置 (16:30)
- 视频：17-4 android打包发布到蒲公英以及豌豆荚（上） (08:33)
- 视频：17-5 android打包发布到蒲公英以及豌豆荚（下） (14:07)
- 视频：17-6 ios端配置 (05:47)
- 视频：17-7 ios编译并上传到蒲公英（上） (10:42)
- 视频：17-8 ios编译并上传到蒲公英（下） (03:07)
- 视频：17-9 ios编译并上传到appstore（上） (05:24)
- 视频：17-10 ios编译并上传到appstore（下） (10:02)
-
第18章 课程总结2 节 | 7分钟
本章将带大家回顾总结本门课程，有问题欢迎大家到课程问答区提问。希望大家缺工作的找到工作，有工作的涨工资。
- 视频：18-1 课后总结 (06:20)
- 作业：18-2 【讨论题】关于React Native的性能优化
-
第19章 使用hook重写项目13 节 | 133分钟
随着React16.8的推出，hook成为了新宠，hook到底是什么呢？有什么好处呢？现在就让我们开始用另一种思维看待react的吧！
- 视频：19-1 hook简介 (03:36)
- 视频：19-2 hook基础函数之useState (09:47)
- 视频：19-3 hook基础函数之useEffect (09:01)
- 视频：19-4 hook基础函数之useRef (13:18)
- 视频：19-5 深入了解useState (24:33)
- 视频：19-6 深入了解useEffect (18:12)
- 视频：19-7 hook函数之useContext和useReducer (15:19)
- 视频：19-8 hook函数之useMemo和useCallback (09:21)
- 视频：19-9 hook函数之useLayoutEffect和useImperativeHandle (05:05)
- 视频：19-10 自定义hook函数 (10:18)
- 视频：19-11 使用hook替代connect高阶组件 (11:40)
- 视频：19-12 总结 (02:28)
- 作业：19-13 【学习任务】关于函数组件的问题
![[衡天云]爆款云服务器 低至12元/月](/hty.png)