背景

大前端當(dāng)下內(nèi)卷愈演愈烈，各種技術(shù)風(fēng)起云涌帚桩，無數(shù)小伙伴感慨「學(xué)不過來了傍睹！」隔盛。在我們身邊也經(jīng)常會(huì)看到各種焦慮，傳統(tǒng)的安卓IOS單端開發(fā)競(jìng)爭(zhēng)力越來越弱拾稳，互聯(lián)網(wǎng)追求的短平快新讓原生開發(fā)者感到壓力山大吮炕，移動(dòng)端開發(fā)和前端開發(fā)是兩套完全不同的技術(shù)棧，這對(duì)很多原生開發(fā)者來說想踏足前端領(lǐng)域變得非常困難访得。甚至有人想往大前端全棧路線發(fā)展龙亲，但不知從何處下手。

現(xiàn)狀

想系統(tǒng)學(xué)習(xí)下跨平臺(tái)技術(shù)悍抑，互聯(lián)網(wǎng)上多數(shù)教程要么只言片語鳄炉，淺嘗輒止，要么技術(shù)老舊搜骡，不再適用拂盯，很多人都希望有一套緊跟當(dāng)前時(shí)代，全面系統(tǒng)的跨平臺(tái)教程记靡。

在當(dāng)前諸多跨平臺(tái)技術(shù)之中谈竿，ReactNative尤其收到追捧，一方面因?yàn)槠淇焖俑咝У拈_發(fā)模式摸吠，迎合了現(xiàn)在互聯(lián)網(wǎng)公司追求短平快空凸、高人效的需求，另一方面是因?yàn)镽eactNative基于React寸痢，和Web呀洲、小程序打通一套技術(shù)棧，后期非常方便邁向大前端全棧啼止，是一個(gè)高性價(jià)比道逗、高可用性的技術(shù)選型。

課程特色

本套課程將通過18個(gè)章節(jié)献烦，全面滓窍、詳盡、由淺入深地學(xué)習(xí)ReactNative各項(xiàng)開發(fā)技術(shù)仿荆。在內(nèi)容上包含：環(huán)境搭建贰您、系統(tǒng)組件坏平、系統(tǒng)Api、動(dòng)畫系統(tǒng)锦亦、TypeScript舶替、Context、HOC高階組件杠园、Memo顾瞪、Ref轉(zhuǎn)發(fā)、橋接原生等模塊抛蚁，在數(shù)量上包含：18個(gè)章節(jié)陈醒、150個(gè)小節(jié)、30+小時(shí)課時(shí)瞧甩、數(shù)千行手敲代碼钉跷、大小2個(gè)實(shí)戰(zhàn)項(xiàng)目。完成本套課程的學(xué)習(xí)肚逸，將具備獨(dú)立參與大型項(xiàng)目開發(fā)能力爷辙；并通過ReactNative間接獲得React、小程序等全棧擴(kuò)展能力朦促，實(shí)現(xiàn)自身價(jià)值突破膝晾。

視頻介紹

課程大綱

第一章：課程介紹-把握整套課程知識(shí)結(jié)構(gòu)和大綱

? ? 1.1 課程大綱介紹，從整體上了解本套課程的學(xué)習(xí)內(nèi)容

? ? 1.2 課程知識(shí)導(dǎo)圖展示务冕，從框架上把握課程知識(shí)結(jié)構(gòu)

? ? 1.3 課程代碼血当，及資料下載方法

第二章：學(xué)前準(zhǔn)備-了解ReactNative優(yōu)勢(shì)和本套課程的學(xué)習(xí)目標(biāo)

? ? 2.1 跨平臺(tái)的優(yōu)勢(shì)和機(jī)遇，在移動(dòng)端內(nèi)卷的當(dāng)下禀忆，只有跨平臺(tái)才能破局重生

? ? 2.2 各種跨平臺(tái)方案的百家爭(zhēng)鳴

? ? 2.3 ReactNative和Flutter的比較臊旭，客觀比較兩者優(yōu)缺點(diǎn)，從需選擇

? ? 2.4 學(xué)習(xí)ReactNative的優(yōu)勢(shì)油湖，增強(qiáng)學(xué)習(xí)本套課程的信心

? ? 2.5 ReactNative大廠級(jí)應(yīng)用

? ? 2.6 本套課程的學(xué)習(xí)目標(biāo)

第三章：開發(fā)環(huán)境搭建和demo運(yùn)行-為正式學(xué)習(xí)做好前期準(zhǔn)備

? ? 3.1 開發(fā)環(huán)境介紹：JS端環(huán)境+Native端環(huán)境

? ? 3.2 安裝node

? ? 3.3 安裝watchman

? ? 3.4 安裝VSCode

? ? 3.5 安裝AndroidStudio

? ? 3.6 安裝sdk platform和sdk tools

? ? 3.7 基于AndroidStudio創(chuàng)建安卓模擬器

? ? 3.8 以及針對(duì)m1平臺(tái)創(chuàng)建安卓模擬器的解決方法（新）

? ? 3.9 使用cli命令創(chuàng)建ReactNative工程巍扛，并啟動(dòng)運(yùn)行

第四章：為“原生開發(fā)”同學(xué)補(bǔ)充前端基礎(chǔ)-掌握前端開發(fā)必備知識(shí)

? ? 4.1 學(xué)習(xí)js的基本使用领跛，了解如何申明變量乏德、函數(shù)、以及js的一些基本特性

? ? 4.2 了解什么是ES5吠昭、ES6喊括，掌握ES6常用的一些方法

? ? 4.3 了解什么是babel以及常見的配置

? ? 4.4 學(xué)習(xí)CSS-flex布局基礎(chǔ)，為后面正式學(xué)習(xí)rn布局打下基礎(chǔ)

? ? 4.5 npm是什么矢棚，npm庫如何檢索郑什、安裝和卸載

? ? 4.6 使用nrm管理npm源

第五章：為“前端開發(fā)”同學(xué)補(bǔ)充原生基礎(chǔ)-掌握原生開發(fā)必備概念

? ? 5.1 以安卓為例，學(xué)習(xí)如何連接設(shè)備蒲肋，以及開發(fā)中常用的adb命令

? ? 5.2 以安卓為例蘑拯，了解移動(dòng)端應(yīng)用的ui結(jié)構(gòu)

? ? 5.3 以安卓為例钝满，講解RN開發(fā)中經(jīng)常會(huì)涉及到的原生文件

? ? 5.4 了解RN組件和原生組件的對(duì)應(yīng)關(guān)系

? ? 5.5 原生開發(fā)語言的選擇，Android: Java/Kotlin申窘，IOS: OC/Swift

? ? 5.6 移動(dòng)端應(yīng)用的版本發(fā)布以及主流的應(yīng)用市場(chǎng)

? ? 5.7 移動(dòng)端特有的生產(chǎn)熱修復(fù)機(jī)制和應(yīng)用場(chǎng)景

? ? 5.8 移動(dòng)設(shè)置的版本兼容選擇

第六章：React基礎(chǔ)知識(shí)和工程結(jié)構(gòu)-掌握核心文件的用法和職能

? ? 6.1 工程目錄結(jié)構(gòu)介紹弯蚜，了解每個(gè)文件的作用和職責(zé)

? ? 6.2 構(gòu)建通用源碼目錄結(jié)構(gòu)，好的工程先從模塊劃分開始

? ? 6.3 package.json全局大管家文件

? ? 6.4 export和import語句剃法，三種導(dǎo)入導(dǎo)出類型

? ? 6.5 class組件的標(biāo)準(zhǔn)寫法和生命周期

? ? 6.6 函數(shù)式組件的優(yōu)勢(shì)和常用hook使用方法（新）

? ? 6.7 JSX語法：高效開發(fā)源自于此

? ? 6.8 計(jì)數(shù)器ui練習(xí)：簡(jiǎn)單的應(yīng)用碎捺，為下一章詳細(xì)學(xué)習(xí)做準(zhǔn)備

? ? 6.9 作業(yè)：獨(dú)立完成簡(jiǎn)易計(jì)時(shí)器功能

第七章：系統(tǒng)組件精講-全面掌握系統(tǒng)組件的使用方法以及多種屬性

? ? 7.1 章節(jié)介紹：全面學(xué)習(xí)系統(tǒng)組件，詳解每一個(gè)組件的用法

? ? 7.2 View：ui構(gòu)建的基石贷洲，一切頁面的起點(diǎn)

? ? 7.3 Text：使用占比最高的ui組件收厨，使用簡(jiǎn)單，深入復(fù)雜

? ? 7.4 通過Image組件構(gòu)建精美ui

? ? 7.5 ImageBackground：View和Image的結(jié)合體

????7.6 強(qiáng)大的TextInput优构，唯一且強(qiáng)大的輸入組件

? ? 7.7 TouchableOpacity：最好用的點(diǎn)擊組件

? ? 7.8 TouchableHighlight：效果豐富的點(diǎn)擊組件诵叁，但使用略顯麻煩

? ? 7.9 TouchableWithoutFeedback：幾乎不用的點(diǎn)擊組件

? ? 7.10 Button：使用簡(jiǎn)單但樣式固定

? ? 7.11 強(qiáng)大的Pressable，幫你實(shí)現(xiàn)復(fù)雜的交互效果（新）

? ? 7.12 ScrollView：基礎(chǔ)滾動(dòng)組件钦椭，快速實(shí)現(xiàn)列表渲染

? ? 7.13 FlatList：一個(gè)高性能的列表組件

? ? 7.14 通過學(xué)習(xí)SectionList黎休，實(shí)現(xiàn)復(fù)雜的多分組列表

? ? 7.15 RefreshControl：下拉刷新神器

? ? 7.16 使用Modal實(shí)現(xiàn)不同樣式的自定義彈窗（新）

? ? 7.17 狀態(tài)欄適配的難題交給StatusBar

? ? 7.18 Switch：開關(guān)切換，一行搞定

? ? 7.19 作業(yè)：獨(dú)立完成兩數(shù)相加計(jì)算功能

第八章：夯實(shí)基礎(chǔ)-常用api-深刻理解RN核心api的功能

? ? 8.1 章節(jié)介紹：全面學(xué)習(xí)系統(tǒng)api玉凯，詳解每一個(gè)api的用法場(chǎng)景

? ? 8.2 Alert和console：你不知道的調(diào)試小技巧

? ? 8.3 Dimensions/useWindowDimensions：獲取屏幕信息

? ? 8.4 使用Platform類輕松獲取平臺(tái)屬性

? ? 8.5 StyleSheet構(gòu)建靈活組件樣式

? ? 8.6 Linking：一個(gè)api幫你省掉50行代碼

? ? 8.7 PixelRatio：像素比例工具

? ? 8.8 BackHandler：針對(duì)安卓返回鍵的適配不再是難題

? ? 8.9 PermissionAndroid：輕松解決原生動(dòng)態(tài)權(quán)限問題

? ? 8.10 Vibration：簡(jiǎn)單好用的震動(dòng)交互

? ? 8.11 ToastAndroid：安卓平臺(tái)的提示工具

? ? 8.12 Transform：矩陣變換的偽3D效果

? ? 8.13 Keyboard：鍵盤操作有神奇

? ? 8.14作業(yè)：每個(gè)api練習(xí)一遍

第九章：動(dòng)畫系統(tǒng)-全面掌握RN動(dòng)畫所有技巧势腮，挑戰(zhàn)90%動(dòng)畫效果

? ? 9.1 簡(jiǎn)單示例學(xué)習(xí)基礎(chǔ)動(dòng)畫方法

? ? 9.2 四大動(dòng)畫類型的使用

? ? 9.3 六中支持動(dòng)畫的系統(tǒng)組件

? ? 9.4 平移動(dòng)畫的多種屬性支持

? ? 9.5 Animated.decay衰減動(dòng)畫函數(shù)

? ? 9.6 Animated.spring彈動(dòng)動(dòng)畫函數(shù)

? ? 9.7 Animated.timing時(shí)間動(dòng)畫函數(shù)

? ? 9.8 Animated.ValueXY矢量動(dòng)畫

? ? 9.9 四種組合動(dòng)畫

? ? 9.10 解決跟隨動(dòng)畫延遲難題

? ? 9.11 解決自定義Modal背景動(dòng)畫難題

? ? 9.12 LayoutAnimation：超級(jí)簡(jiǎn)單又好用的布局動(dòng)畫

? ? 9.13 課后作業(yè)練習(xí)

? ? 9.14 本章小結(jié)

? ? 9.15 作業(yè)：獨(dú)立完成添加購物車動(dòng)畫

第十章：小試牛刀-練習(xí)項(xiàng)目，賬號(hào)密碼本-鞏固強(qiáng)化基礎(chǔ)階段知識(shí)

? ? 10.1 練習(xí)項(xiàng)目賬號(hào)管理漫仆，演示與分析

? ? 10.2 初始化項(xiàng)目和頁面框架

? ? 10.3 自定義封裝添加賬號(hào)彈窗

? ? 10.4 使用UUID和AsyncStorage保存賬號(hào)數(shù)據(jù)

? ? 10.5 繪制賬號(hào)列表ui

? ? 10.6 賬號(hào)列表實(shí)現(xiàn)展開收起功能

? ? 10.7 添加賬號(hào)后實(shí)時(shí)刷新列表

? ? 10.8 實(shí)現(xiàn)賬號(hào)列表細(xì)節(jié)交互

? ? 10.9 項(xiàng)目打包發(fā)布

? ? 10.10 本章小結(jié)

? ? 10.11 作業(yè)：獨(dú)立完成賬號(hào)密碼本

第十一章：練兵場(chǎng)-TypeScript快速進(jìn)階-掌握企業(yè)級(jí)開發(fā)的必備利器

? ? 11.1 TypeScript介紹和自身優(yōu)勢(shì)捎拯，企業(yè)級(jí)開發(fā)中的必備利器

? ? 11.2 TypeScript安裝和項(xiàng)目配置

? ? 11.3 number、string盲厌、boolean三大基礎(chǔ)類型

????11.4 數(shù)組署照、元組、枚舉類型的使用

????11.5 聯(lián)合類型和字面量

????11.6 函數(shù)類型

????11.7 類型文件和命名空間

????11.8 課后作業(yè)和本章總結(jié)

????11.9 作業(yè)：復(fù)習(xí)每個(gè)TS類型及使用方法

第十二章：進(jìn)階學(xué)習(xí)-Context上下文-深刻理解解耦的精髓

? ? 12.1 Context上下文介紹和演示

? ? 12.2 Context上下文實(shí)例開發(fā)：應(yīng)用主題配置

? ? 12.3 Context上下文內(nèi)容小結(jié)

? ? 12.4 作業(yè)：使用Context傳遞登陸信息

第十三章：進(jìn)階學(xué)習(xí)-HOC高階組件-強(qiáng)大的解耦和封裝技巧

? ? 13.1 HOC高階組件介紹

????13.2 高階組件案例演示1:Hack渲染函數(shù)

????13.3 高階組件案例演示2：Hack生命周期

????13.4 課后作業(yè)和本章小結(jié)

????13.5 作業(yè)：獨(dú)立實(shí)現(xiàn)一個(gè)首頁彈窗模塊高階組件

第十四章：高手必學(xué)-memo與性能優(yōu)化-幾種必備memo技巧

? ? 14.1 函數(shù)式組件和Class組件攔截多余渲染的方法

????14.2 使用useMemo緩存計(jì)算結(jié)果

????14.3 使用useMemo緩存ui以及useCallback緩存回調(diào)函數(shù)

????14.4 hermes引擎的開啟吗浩，提升啟動(dòng)速度建芙、壓縮包體積（新）

????14.5 課后作業(yè)和本章小結(jié)

第十五章：高手必學(xué)-ref轉(zhuǎn)發(fā)-具備更強(qiáng)的自定義組件能力

? ? 15.1 ref轉(zhuǎn)發(fā)案例演示1:外層操作原始組件

????15.2 ref轉(zhuǎn)發(fā)案例演示1:對(duì)外暴露api

????15.3 課后作業(yè)和本章小結(jié)

????15.4 作業(yè)：獨(dú)立實(shí)現(xiàn)一個(gè)函數(shù)式組件

第十六章：高手必學(xué)-橋接原生-精通4種橋接方式

? ? 16.1 橋接原生介紹及常見的應(yīng)用場(chǎng)景

????16.2 橋接原生實(shí)現(xiàn)js層調(diào)用原生方法

????16.3 橋接原生實(shí)現(xiàn)js層獲取原生常量（同步獲取）

????16.4 橋接原生原子組件：實(shí)現(xiàn)原生組件

????16.5 橋接原生原子組件：JS層調(diào)用原生組件

????16.6 橋接原生原子組件：封裝原生組件屬性

????16.7 橋接原生原子組件：原生事件回調(diào)JS層

????16.8 橋接原生原子組件：JS層調(diào)用原生api

????16.9 橋接原生容器組件

????16.10 課后作業(yè)和本章總結(jié)

????16.11 作業(yè)：獨(dú)立實(shí)現(xiàn)兩個(gè)原生組件

第十七章：實(shí)戰(zhàn)項(xiàng)目-高仿商業(yè)級(jí)小紅書App

? ? 17.1 初體驗(yàn)使用小紅書App懂扼，梳理應(yīng)用的使用流程和核心頁面禁荸，明確實(shí)戰(zhàn)項(xiàng)目仿寫功能以及達(dá)成目標(biāo)

????17.2 需求分析，整理項(xiàng)目中會(huì)用到的技術(shù)點(diǎn)阀湿，構(gòu)思實(shí)現(xiàn)方案或者尋找第三方庫支持赶熟，模擬企業(yè)級(jí)開發(fā)中技術(shù)方案評(píng)審流程

????17.3 任務(wù)拆分，并開始初始化工程陷嘴，搭建應(yīng)用框架映砖，完成基礎(chǔ)配置和部分三方庫引入

????17.4 使用flex布局和多種組件實(shí)現(xiàn)歡迎頁面和登陸頁面

????17.5 使用slice函數(shù)實(shí)現(xiàn)登陸頁面手機(jī)號(hào)碼分段顯示格式

????17.6 使用Linking系統(tǒng)api快速實(shí)現(xiàn)H5協(xié)議查看功能

????17.7 使用async-storage實(shí)現(xiàn)登陸信息的存儲(chǔ)和自登陸流程

????17.8 使用react-anvigation構(gòu)建BottomTab主頁

????17.9 自定義首頁標(biāo)題欄，實(shí)現(xiàn)切換Tab動(dòng)畫笑話

????17.10 封裝首頁標(biāo)題欄為獨(dú)立組件灾挨，定義Props和事件回調(diào)

????17.11 使用自定義Modal技術(shù)邑退，封裝滾動(dòng)頻道選擇器實(shí)現(xiàn)聯(lián)動(dòng)切換效果

????17.12 使用FlatList實(shí)現(xiàn)首頁列表渲染

????17.13 使用SectionList構(gòu)建“我的日持袼危”頁面，并自定頁面跳轉(zhuǎn)動(dòng)畫

????17.14 使用StatusBar實(shí)現(xiàn)狀態(tài)欄模式動(dòng)態(tài)切換

????17.15 監(jiān)聽頁面滾動(dòng)距離地技，實(shí)現(xiàn)滾動(dòng)漸隱漸顯效果

????17.16 使用LinearGraident組件實(shí)現(xiàn)精美的線性漸變按鈕效果

????17.17 用巧妙的方法實(shí)現(xiàn)橫向瀑布流布局

????17.18 自定義“購物”頁面標(biāo)題欄組件逝撬，實(shí)現(xiàn)神奇的搜索框無縫切換效果

????17.19 實(shí)現(xiàn)頂部品牌輪播組件

????17.20 使用flex-wrap實(shí)現(xiàn)自動(dòng)換行伸縮布局

????17.21?使用FlatList實(shí)現(xiàn)商品列表

????17.22 使用FlatLIst構(gòu)建“消息頁面”

????17.23 SectionList構(gòu)建“我的”頁面，利用SectionHeader和ListHeader渲染頭部

????17.24 使用Animated.Image實(shí)現(xiàn)頂部頭像滾動(dòng)出現(xiàn)動(dòng)畫

????17.25 巧用“高階組件HOC”解偶側(cè)拉菜單的實(shí)現(xiàn)

????17.26 如何實(shí)現(xiàn)滑動(dòng)Tab切換乓土？react-navigation來幫忙

????17.27 如何更高效的背景漸變宪潮？還有setNativeProps這個(gè)高招

????17.28 使用SectionList巧妙構(gòu)建“文章詳情”頁

????17.29 如何實(shí)現(xiàn)評(píng)論區(qū)的二級(jí)評(píng)論，有一個(gè)簡(jiǎn)單的方法

????17.30 巧妙實(shí)現(xiàn)點(diǎn)贊按鈕的心跳動(dòng)效

????17.31?退出登陸流程打同趣苏，應(yīng)用生命周期閉環(huán)

????17.32 介紹兩個(gè)RN熱修復(fù)方案：CodePush和Pushy

????17.33 選擇Pushy作為方案狡相，在項(xiàng)目中集成

????17.34 修改原生端項(xiàng)目打包，構(gòu)建生產(chǎn)發(fā)布版本食磕，并發(fā)布Pushy平臺(tái)

????17.35 在項(xiàng)目中實(shí)現(xiàn)補(bǔ)丁加載流程尽棕，并發(fā)布補(bǔ)丁，測(cè)試是否修復(fù)成功

????17.36 項(xiàng)目收尾彬伦，整理代碼和模塊

????17.37 作業(yè)：跟隨教程獨(dú)立完成整個(gè)項(xiàng)目的開發(fā)

第十八章：課程總結(jié)

? ? 18.1 課程內(nèi)容回顧

? ? 18.2 關(guān)鍵知識(shí)點(diǎn)總結(jié)

? ? 18.3 后續(xù)學(xué)習(xí)建議