第 1章 走進(jìn)React Native 1

1.1　React Native給我們帶來(lái)了什么　1

1.2　React Native的適用場(chǎng)景　2

1.3　搭建React Native環(huán)境　2

1.3.1　iOS開(kāi)發(fā)常見(jiàn)概念　2

1.3.2　Android開(kāi)發(fā)常見(jiàn)概念　6

1.3.3　命令行構(gòu)建　8

1.3.4　在現(xiàn)有原生項(xiàng)目中增加React Native環(huán)境　9

1.4　本章小結(jié)　15

第 2章　React Native啟動(dòng)流程及視圖解析　16

2.1　React Native啟動(dòng)流程　16

2.1.1　iOS啟動(dòng)流程　17

2.1.2　Android啟動(dòng)流程　18

2.1.3　小結(jié)　20

2.2　局部渲染React Native　20

2.2.1　iOS局部渲染　20

2.2.2　Android局部渲染　21

2.3　React Native原生視圖詳解　23

2.3.1　iOSRCTRootView　23

2.3.2　AndroidReactRootView　24

2.3.3　視圖長(zhǎng)度單位　26

2.4　React Native布局方式　28

2.4.1　Flex布局　28

2.4.2　定位　32

2.5　本章小結(jié)　34

第3章　文本及輸入　35

3.1　Text解析　35

3.1.1　RCTTextView和ReactTextView　37

3.1.2　行間距　39

3.2　Text布局方式　41

3.2.1　Text的嵌套　41

3.2.2　同行多字號(hào)文本的對(duì)齊方式　43

3.3　文本輸入TextInput　45

3.4　軟鍵盤　49

3.4.1　Keyboard　49

3.4.2　KeyboardAvoidingView　51

3.5　本章小結(jié)　52

第4章　事件響應(yīng)機(jī)制　53

4.1　觸摸事件　53

4.2　Touch組件　55

4.3　手勢(shì)響應(yīng)系統(tǒng)　58

4.3.1　響應(yīng)者生命周期　58

4.3.2　PanResponder　64

4.4　原生事件機(jī)制　67

4.4.1　iOS事件機(jī)制　68

4.4.2　Android事件機(jī)制　70

4.5　本章小結(jié)　74

第5章　媒體、文件及本地存儲(chǔ)　75

5.1　圖片組件　75

5.1.1　Image屬性及方法詳解　77

5.1.2　原生圖片組件　81

5.1.3　高性能圖片組件：react-native-fast-image　83

5.2　音視頻文件的操作方式　86

5.2.1　音頻處理　86

5.2.2　視頻處理　94

5.3　本地文件系統(tǒng)　98

5.3.1　iOS本地文件系統(tǒng)　98

5.3.2　Android本地文件系統(tǒng)　99

5.3.3　react-native-fs　100

5.4　本地存儲(chǔ)　103

5.4.1　iOS本地存儲(chǔ)方式　103

5.4.2　Android本地存儲(chǔ)方式　104

5.4.3　React Native本地存儲(chǔ)方式　108

5.4.4　React Native混合模式下的公共存儲(chǔ)方案　110

5.5　本章小結(jié)　116

第6章　動(dòng)畫　117

6.1　布局動(dòng)畫LayoutAnimation　117

6.1.1　基本用法　117

6.1.2　原生實(shí)現(xiàn)原理　124

6.2　交互動(dòng)畫Animated　128

6.2.1　基本用法　128

6.2.2　動(dòng)畫的控制與組合　139

6.2.3　動(dòng)畫值的運(yùn)算與變化　143

6.2.4　手勢(shì)跟蹤　145

6.3　動(dòng)畫實(shí)現(xiàn)原理及優(yōu)化　146

6.3.1　動(dòng)畫實(shí)現(xiàn)原理　147

6.3.2　常見(jiàn)優(yōu)化手段　148

6.4　本章小結(jié)　152

第7章　React Native與原生端的通信方式　153

7.1　JavaScript調(diào)用原生模塊　153

7.1.1　iOS與JavaScript的通信方式　153

7.1.2　Android與JavaScript的通信方式　160

7.2　JavaScript跨平臺(tái)運(yùn)行原理　169

7.2.1　JavaScriptCoreiOS的JavaScript引擎　169

7.2.2　HermesAndroid的新版JavaScript引擎　173

7.3　本章小結(jié)　177

第8章　自定義原生組件　178

8.1　原生UI組件封裝　178

8.1.1　iOS原生組件封裝　178

8.1.2　Android原生組件封裝　181

8.1.3　JavaScript直接調(diào)用原生組件方法　186

8.2　自定義插件　189

8.3　本章小結(jié)　190

第9章　React Native的導(dǎo)航方案　191

9.1　原生導(dǎo)航偏好　191

9.2　JavaScript導(dǎo)航React Navigation　192

9.2.1　自定義導(dǎo)航　193

9.2.2　導(dǎo)航事件　198

9.3　原生導(dǎo)航React Native Navigation　199

9.3.1　自定義導(dǎo)航　200

9.3.2　視圖生命周期　204

9.4　混合導(dǎo)航探索　205

9.4.1　方案設(shè)計(jì)　206

9.4.2　擴(kuò)展功能　214

9.5　本章小結(jié)　218

第 10章　熱更新與多實(shí)例　219

10.1　熱更新　219

10.1.1　熱更新流程　219

10.1.2　第三方服務(wù)　220

10.1.3　具體實(shí)現(xiàn)　221

10.2　App平臺(tái)化React Native多實(shí)例　225

10.2.1　多實(shí)例管理　225

10.2.2　指定渲染依賴實(shí)例　226

10.2.3　自定義原生模塊依賴　230

10.2.4　多實(shí)例效果及局限　233

10.3　本章小結(jié)　235

第 11章　常見(jiàn)場(chǎng)景優(yōu)化　236

11.1　頁(yè)面啟動(dòng)白屏?xí)r間　236

11.1.1　JavaScript Bundle包大小的影響　236

11.1.2　自定義原生模塊的影響　237

11.1.3　頁(yè)面層級(jí)深度　238

11.2　視圖預(yù)加載　241

11.3　長(zhǎng)列表優(yōu)化　250

11.3.1　FlatList、SectionList和VirtualizedList　251

11.3.2　原生視圖的復(fù)用　254

11.4　Tab切換　263

11.5　本章小結(jié)　264

第 12章　React Native中的微前端　265

12.1　什么是微前端　265

12.2　React Native 微前端探索　271

12.3　本章小結(jié)　272