融合RN的跨平臺(tái)能力＋TS的全新開發(fā)體驗(yàn)

使用RN + TS開發(fā)聽書App，通過(guò)導(dǎo)航器、dva狀態(tài)管理、圖標(biāo)生成組件、自定義導(dǎo)航器、動(dòng)畫效果、音視頻的播放、動(dòng)態(tài)導(dǎo)航和動(dòng)態(tài)model、本地?cái)?shù)據(jù)持久化等一系列的功能，完成RN的技術(shù)落地。

適合人群
由于公司業(yè)務(wù)需要，需要學(xué)習(xí)跨平臺(tái)開發(fā)的技能黨
想要自己開發(fā)獨(dú)立應(yīng)用的個(gè)人開發(fā)者
想知道怎么在RN項(xiàng)目中使用TypeScript的工程師
技術(shù)儲(chǔ)備要求
具備JavaScript，ES6，React 前端基礎(chǔ)

章節(jié)目錄：

• 第1章 課程介紹 1 節(jié) | 17分鐘
  本課程主要介紹為什么要使用React Native + TypeScript開發(fā)應(yīng)用。
  收起列表
  

• 視頻：1-1 課程導(dǎo)學(xué) (16:17)

• 第2章 ES6、React、React Native基礎(chǔ)知識(shí)串講21 節(jié) | 287分鐘
  本章會(huì)講解學(xué)習(xí)這門課程之前必備的基礎(chǔ)知識(shí)，主要講解ES6、RN等必備知識(shí)點(diǎn)，專門為新手學(xué)員準(zhǔn)備的，這些內(nèi)容在后面的實(shí)戰(zhàn)中都會(huì)用到。
  收起列表
  

• 視頻：2-1 環(huán)境搭建 (13:04)

• 視頻：2-2?android開發(fā)環(huán)境搭建 (12:25)

• 視頻：2-3 創(chuàng)建項(xiàng)目 (09:20)

• 視頻：2-4 ES6之簡(jiǎn)介及變量聲明 (14:00)

• 視頻：2-5 ES6之模板字符串和函數(shù)默認(rèn)參數(shù) (21:19)

• 視頻：2-6 ES6之箭頭函數(shù) (09:35)

• 視頻：2-7 ES6之解構(gòu)賦值、對(duì)象字面量、展開語(yǔ)法、剩余語(yǔ)法 (17:34)

• 視頻：2-8 ES6之class (28:42)

• 視頻：2-9 ES6之class繼承 (15:14)

• 視頻：2-10 promise知識(shí)講解 (28:40)

• 視頻：2-11 ES6之generator (23:29)

• 視頻：2-12 ES6之模塊 (03:51)

• 視頻：2-13 React基礎(chǔ) (16:26)

• 視頻：2-14 RN基礎(chǔ)知識(shí)之RN介紹 (12:10)

• 視頻：2-15 RN基礎(chǔ)知識(shí)之寬高 (03:27)

• 視頻：2-16 RN基礎(chǔ)知識(shí)之基礎(chǔ)組件與樣式 (07:32)

• 視頻：2-17 RN布局（1） (11:22)

• 視頻：2-18 RN布局（2） (14:04)

• 視頻：2-19 RN基礎(chǔ)之觸摸事件 (12:38)

• 視頻：2-20 RN基礎(chǔ)之網(wǎng)絡(luò)請(qǐng)求 (12:03)

• 作業(yè)：2-21 【討論題】談?wù)勀銓?duì)JSX得理解

• 第3章 TypeScript基礎(chǔ)知識(shí)5 節(jié) | 43分鐘
  本章會(huì)講解學(xué)習(xí)這門課程之前必備的基礎(chǔ)知識(shí)，主要講解TS的必備知識(shí)點(diǎn)，專門為新手學(xué)員準(zhǔn)備的，這些內(nèi)容在后面的實(shí)戰(zhàn)中都會(huì)用到。
  收起列表
  

• 視頻：3-1 TypeScript之簡(jiǎn)介 (11:35)

• 視頻：3-2 TypeScript之非原始類型 (08:25)

• 視頻：3-3 TypeScript之函數(shù) (05:14)

• 視頻：3-4 TypeScript之接口 (13:31)

• 視頻：3-5 TypeScript之泛型 (03:41)

• 第4章 項(xiàng)目分析1 節(jié) | 11分鐘
  本章主要對(duì)這門課程需要制作的聽書應(yīng)用的分析，講解整個(gè)項(xiàng)目的流程，對(duì)本門課程的應(yīng)用進(jìn)行需求、模塊、技術(shù)的分析
  收起列表
  

• 視頻：4-1 項(xiàng)目分析 (10:03)

• 第5章 項(xiàng)目初始化3 節(jié) | 27分鐘
  本章才算是正式開始應(yīng)用的開發(fā)了。還有我在工作中用到的兩個(gè)非常好的第三方項(xiàng)目，可以做到多環(huán)境設(shè)置和絕對(duì)路徑的設(shè)置，能幫助我們減少一些繁瑣枯燥又容易出錯(cuò)的工作。
  收起列表
  

• 視頻：5-1 項(xiàng)目初始化 (05:48)

• 視頻：5-2 多環(huán)境 (07:43)

• 視頻：5-3 絕對(duì)路徑 (13:26)

• 第6章 接口管理工具1 節(jié) | 17分鐘
  本章主要學(xué)習(xí)如何在本地部署yapi，以及yapi的基本使用方法
  收起列表
  

• 視頻：6-1 接口文檔 (16:06)

• 第7章 新版導(dǎo)航器React-Navigation5.05 節(jié) | 73分鐘
  本章主要講解5.0版本的react-navigation，堆棧式和底部標(biāo)簽導(dǎo)航器的基本配置和使用
  收起列表
  

• 視頻：7-1 導(dǎo)航器基本介紹 (03:48)

• 視頻：7-2 安裝導(dǎo)航器 (08:23)

• 視頻：7-3 堆棧式導(dǎo)航器（1） (18:12)

• 視頻：7-4 堆棧式導(dǎo)航器（2） (18:12)

• 視頻：7-5 標(biāo)簽導(dǎo)航器 (24:06)

• 第8章 狀態(tài)管理Dva8 節(jié) | 69分鐘
  本章主要講解Redux和redux-saga的封裝庫(kù)dva，以及dva和react-native的集成以及插件loading
  收起列表
  

• 視頻：8-1 狀態(tài)管理基礎(chǔ)介紹(redux) (19:42)

• 視頻：8-2 狀態(tài)管理基礎(chǔ)介紹(redux-saga) (10:30)

• 視頻：8-3 集成Dva-core (15:51)

• 視頻：8-4 Dva基礎(chǔ)使用方法 (10:12)

• 視頻：8-5 Dva異步操作 (04:29)

• 視頻：8-6 Dva插件dva-loading (07:46)

• 作業(yè)：8-7 【學(xué)習(xí)任務(wù)】react-redux中的connect應(yīng)用

• 作業(yè)：8-8 【討論題】關(guān)于高階組件和redux得理解

• 第9章 首頁(yè)模塊18 節(jié) | 278分鐘
  這一章才算是正式開始了業(yè)務(wù)邏輯的開發(fā)，本章會(huì)教大家完成首頁(yè)模塊的功能，如輪播圖、漸變色，接口請(qǐng)求、自定義頂部標(biāo)簽導(dǎo)航器的標(biāo)簽欄
  收起列表
  

• 視頻：9-1 首頁(yè)展示與功能分析 (03:29)

• 視頻：9-2 底部標(biāo)簽導(dǎo)航器字體圖標(biāo) (13:05)

• 視頻：9-3 頂部標(biāo)簽導(dǎo)航器 (13:20)

• 視頻：9-4 輪播圖 上 (18:00)

• 視頻：9-5 輪播圖 下 (16:26)

• 視頻：9-6 網(wǎng)絡(luò)請(qǐng)求到數(shù)據(jù)，通過(guò)dva映射到組件 (28:11)

• 視頻：9-7 猜你喜歡 上 (21:27)

• 視頻：9-8 猜你喜歡 下 (20:08)

• 視頻：9-9 首頁(yè)列表（1） (14:00)

• 視頻：9-10 首頁(yè)列表（2） (19:41)

• 視頻：9-11 首頁(yè)列表優(yōu)化與課后作業(yè) (11:49)

• 視頻：9-12 下拉刷新 (07:44)

• 視頻：9-13 上拉加載更多 (23:53)

• 視頻：9-14 自定義頂部標(biāo)簽組件 (13:37)

• 視頻：9-15 自定義頂部標(biāo)簽組件布局 (12:16)

• 視頻：9-16 自定義頂部標(biāo)簽組件漸變色效果 (16:21)

• 視頻：9-17 自定義頂部標(biāo)簽漸變色組件顯隱 (17:36)

• 視頻：9-18 自定義組件的完善 (06:54)

• 第10章 分類模塊13 節(jié) | 136分鐘
  本章主要會(huì)通過(guò)dva狀態(tài)管理庫(kù)來(lái)完成類別的增刪改查功能以及拓展排序的功能，通過(guò)這幾個(gè)經(jīng)典業(yè)務(wù)邏輯幫助大家更好的掌握dva庫(kù)，另外會(huì)學(xué)習(xí)動(dòng)態(tài)的頂部標(biāo)簽導(dǎo)航器和動(dòng)態(tài)的生成dva的model的功能。
  收起列表
  

• 視頻：10-1 類別模塊功能演示和分析 (01:56)

• 視頻：10-2 數(shù)據(jù)結(jié)構(gòu)和本地?cái)?shù)據(jù)存儲(chǔ) (09:18)

• 視頻：10-3 類別模塊的model (16:34)

• 視頻：10-4 類別頁(yè)面的布局和樣式（1） (17:29)

• 視頻：10-5 類別頁(yè)面的布局和樣式（2） (11:53)

• 視頻：10-6 添加標(biāo)題欄右上角按鈕以及切換編輯狀態(tài) (18:17)

• 視頻：10-7 新增類別和刪除類別（1） (11:38)

• 視頻：10-8 新增類別和刪除類別（2） (10:21)

• 視頻：10-9 類別的拖拽功能 (11:22)

• 視頻：10-10 動(dòng)態(tài)生成標(biāo)簽導(dǎo)航器和model（1） (12:11)

• 視頻：10-11 動(dòng)態(tài)生成標(biāo)簽導(dǎo)航器和model（2） (13:07)

• 視頻：10-12 課后作業(yè) (01:11)

• 作業(yè)：10-13 【學(xué)習(xí)任務(wù)】是否可以通過(guò)其他方式實(shí)現(xiàn)動(dòng)態(tài)頂部標(biāo)簽導(dǎo)航器

• 第11章 頻道模塊12 節(jié) | 186分鐘
  本章主要學(xué)習(xí)手勢(shì)響應(yīng)系統(tǒng)，通過(guò)手勢(shì)響應(yīng)系統(tǒng)實(shí)現(xiàn)當(dāng)頭部可見時(shí)，手指向上滑動(dòng)時(shí)，tab標(biāo)簽組件中的FlatList無(wú)法滾動(dòng)，逐漸滑動(dòng)到頭部組件不可見時(shí)，tab標(biāo)簽組件中的FlatList才能滾動(dòng)的效果；當(dāng)頭部不可見時(shí)，手指向下滑動(dòng)時(shí)，直到FlatList滾動(dòng)到最頂部時(shí)，頭部才可以滑動(dòng)的效果，而且根據(jù)這個(gè)滾動(dòng)，標(biāo)簽欄也會(huì)有淡入淡出的動(dòng)…
  收起列表
  

• 視頻：11-1 頻道模塊的功能演示和分析 (01:54)

• 視頻：11-2 yapi創(chuàng)建接口和model (16:45)

• 視頻：11-3 頻道信息組件（上） (20:59)

• 視頻：11-4 頻道信息組件（下） (24:22)

• 視頻：11-5 頻道頁(yè)面Tab標(biāo)簽（上） (17:32)

• 視頻：11-6 頻道頁(yè)面Tab標(biāo)簽（下） (24:57)

• 視頻：11-7 react-native的動(dòng)畫 (10:12)

• 視頻：11-8 手勢(shì)響應(yīng)系統(tǒng)（1） (16:07)

• 視頻：11-9 手勢(shì)響應(yīng)系統(tǒng)（2） (07:38)

• 視頻：11-10 手勢(shì)響應(yīng)系統(tǒng)（3） (13:12)

• 視頻：11-11 手勢(shì)響應(yīng)系統(tǒng)（4） (21:15)

• 視頻：11-12 react-native-tab-view組件的優(yōu)化以及課后作業(yè) (10:12)

• 第12章 頻道詳情模塊17 節(jié) | 184分鐘
  本章主要學(xué)習(xí)音頻的播放，而且通過(guò)進(jìn)度條顯示當(dāng)前音頻的播放時(shí)長(zhǎng)，以及上一首、下一首、播放、暫停的功能和彈幕
  收起列表
  

• 視頻：12-1 頻道詳情頁(yè)面的功能介紹和分析 (01:35)

• 視頻：12-2 導(dǎo)航器的全屏模式（上） (12:08)

• 視頻：12-3 導(dǎo)航器的全屏模式（下） (09:37)

• 視頻：12-4 音頻播放（1） (09:14)

• 視頻：12-5 音頻播放（2） (10:19)

• 視頻：12-6 音頻播放（3） (09:25)

• 視頻：12-7 音頻播放（4） (09:30)

• 視頻：12-8 暫停以及進(jìn)度條展示播放時(shí)間（上） (13:27)

• 視頻：12-9 暫停以及進(jìn)度條展示播放時(shí)間（下） (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 課后練習(xí) (00:38)

• 第13章 底部標(biāo)簽導(dǎo)航器的播放標(biāo)簽以及脫離導(dǎo)航器之外的播放按鈕6 節(jié) | 59分鐘
  本章主要學(xué)習(xí)如何在導(dǎo)航器之外展示一個(gè)獨(dú)立的組件，而且有播放動(dòng)畫效果。并且會(huì)根據(jù)頁(yè)面和播放的狀態(tài)判斷是否顯示
  收起列表
  

• 視頻：13-1 底部標(biāo)簽播放按鈕的功能介紹和分析 (01:10)

• 視頻：13-2 自定義底部標(biāo)簽按鈕（上） (14:23)

• 視頻：13-3 自定義底部標(biāo)簽按鈕（下） (12:20)

• 視頻：13-4 頁(yè)面之外的播放按鈕 (17:38)

• 視頻：13-5 播放按鈕的跳轉(zhuǎn)功能 (12:18)

• 視頻：13-6 課后練習(xí) (00:23)

• 第14章 我聽模塊7 節(jié) | 47分鐘
  本章主要學(xué)習(xí)本地?cái)?shù)據(jù)持久化，realmjs的使用，通過(guò)記錄用戶曾經(jīng)播放過(guò)的音頻以及播放到的時(shí)間，然后以列表的形式展示出來(lái)。
  收起列表
  

• 視頻：14-1 我聽模塊的功能展示和分析 (02:41)

• 視頻：14-2 安裝realm (13:04)

• 視頻：14-3 保存播放的音頻 (07:06)

• 視頻：14-4 查詢r(jià)ealm數(shù)據(jù) (13:26)

• 視頻：14-5 刪除realm數(shù)據(jù) (04:16)

• 視頻：14-6 更新表結(jié)構(gòu)以及遷移數(shù)據(jù) (06:22)

• 作業(yè)：14-7 【學(xué)習(xí)任務(wù)】在react native中如何實(shí)現(xiàn)本地存儲(chǔ)數(shù)據(jù)

• 第15章 發(fā)現(xiàn)模塊6 節(jié) | 30分鐘
  本章主要學(xué)習(xí)在FlatList中展示視頻，以及視頻的播放功能。并且同一時(shí)間只能播放一個(gè)視頻，需要做一些優(yōu)化，并且在播放視頻時(shí)需要暫停音頻。
  收起列表
  

• 視頻：15-1 發(fā)現(xiàn)頁(yè)面的功能介紹和分析 (00:37)

• 視頻：15-2 發(fā)現(xiàn)模塊的model (06:18)

• 視頻：15-3 FlatList展示視頻 (14:12)

• 視頻：15-4 暫停其他視頻和音頻的播放 (08:14)

• 視頻：15-5 課后練習(xí) (00:39)

• 作業(yè)：15-6 【學(xué)習(xí)任務(wù)】在react native中如何實(shí)現(xiàn)本地存儲(chǔ)數(shù)據(jù)

• 第16章 賬號(hào)模塊10 節(jié) | 106分鐘
  本章主要學(xué)習(xí)表單的校驗(yàn)和提交，并且需要保存登錄狀態(tài)，這樣用戶在以后進(jìn)入應(yīng)用時(shí)，就不會(huì)再次提醒需要登錄了。
  收起列表
  

• 視頻：16-1 賬號(hào)模塊的功能展示和分析 (02:26)

• 視頻：16-2 賬號(hào)模塊的model (08:41)

• 視頻：16-3 我的頁(yè)面ui以及跳轉(zhuǎn)功能 (14:29)

• 視頻：16-4 登錄頁(yè)面表單組件Formik (14:25)

• 視頻：16-5 表單校驗(yàn)庫(kù)yup (07:04)

• 視頻：16-6 封裝表單輸入框 (15:37)

• 視頻：16-7 顯示用戶信息以及保存登錄狀態(tài)（上） (13:30)

• 視頻：16-8 顯示用戶信息以及保存登錄狀態(tài)（下） (13:23)

• 視頻：16-9 功能完善和課后練習(xí) (16:05)

• 作業(yè)：16-10 【討論題】關(guān)于React Native的優(yōu)缺點(diǎn)？

• 第17章 打包發(fā)布10 節(jié) | 98分鐘
  本章主要學(xué)習(xí)應(yīng)用的打包和發(fā)布。
  收起列表
  

• 視頻：17-1 啟動(dòng)頁(yè)之a(chǎn)ndroid配置 (16:45)

• 視頻：17-2 啟動(dòng)頁(yè)之ios配置 (06:31)

• 視頻：17-3 Android應(yīng)用圖標(biāo)以及配置 (16:30)

• 視頻：17-4 android打包發(fā)布到蒲公英以及豌豆莢（上） (08:33)

• 視頻：17-5 android打包發(fā)布到蒲公英以及豌豆莢（下） (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章 課程總結(jié)2 節(jié) | 7分鐘
  本章將帶大家回顧總結(jié)本門課程，有問(wèn)題歡迎大家到課程問(wèn)答區(qū)提問(wèn)。希望大家缺工作的找到工作，有工作的漲工資。
  收起列表
  

• 視頻：18-1 課后總結(jié) (06:20)

• 作業(yè)：18-2 【討論題】關(guān)于React Native的性能優(yōu)化

• 第19章 使用hook重寫項(xiàng)目13 節(jié) | 133分鐘
  隨著React16.8的推出，hook成為了新寵，hook到底是什么呢？有什么好處呢？現(xiàn)在就讓我們開始用另一種思維看待react的吧！
  收起列表
  

• 視頻：19-1 hook簡(jiǎn)介 (03:36)

• 視頻：19-2 hook基礎(chǔ)函數(shù)之useState (09:47)

• 視頻：19-3 hook基礎(chǔ)函數(shù)之useEffect (09:01)

• 視頻：19-4 hook基礎(chǔ)函數(shù)之useRef (13:18)

• 視頻：19-5 深入了解useState (24:33)

• 視頻：19-6 深入了解useEffect (18:12)

• 視頻：19-7 hook函數(shù)之useContext和useReducer (15:19)

• 視頻：19-8 hook函數(shù)之useMemo和useCallback (09:21)

• 視頻：19-9 hook函數(shù)之useLayoutEffect和useImperativeHandle (05:05)

• 視頻：19-10 自定義hook函數(shù) (10:18)

• 視頻：19-11 使用hook替代connect高階組件 (11:40)

• 視頻：19-12 總結(jié) (02:28)

• 作業(yè)：19-13 【學(xué)習(xí)任務(wù)】關(guān)于函數(shù)組件的問(wèn)題