《React Native跨平台移動套用開發(第二版)》一書作者闕喜濤,電子工業出版社2017年5月出版
基本介紹
- 書名:React Native跨平台移動套用開發(第二版)
- 作者:闕喜濤
- ISBN:978-7-121-31273-1
- 頁數:416
- 定價:99.00
- 出版社:電子工業出版社
- 出版時間:2017年5月
- 開本:16
內容提要,目錄,
內容提要
React Native是Facebook公司推出的強大的、開源的跨平台移動套用開發框架。它能大幅減少跨平台移動套用開發的工作量(相比原生代碼開發能減少至少50%),並且代碼結構清晰、簡單易懂。同時React Native框架採用模組化的結構,使套用版本的更新疊代非常簡單。隨著它的日趨成熟,React Native必然會成為移動套用開發的主流技術。
《React Native跨平台移動套用開發(第二版)》由淺入深,系統發介紹了使用React Native框架跨平台開發所需要用到的知識。《React Native跨平台移動套用開發(第二版)》每一章都專注於闡述移動套用開發某一方面的知識,配合若干個原創的、精簡的例程,能讓讀者系統、快速地掌握該方面知識。
《React Native跨平台移動套用開發(第二版)》的結構是按一個有基本的編程基礎知識,剛學習JavaScript基本語法的讀者的最佳學習路徑來編寫的。有一定基礎的開發人員也可以將《React Native跨平台移動套用開發(第二版)》作為一本React Native開發的“字典”來使用,在開發時可以快速查找相關知識點的細節。
希望通過《React Native跨平台移動套用開發(第二版)》,能將最新的React Native開發技術介紹給國內廣大開發者,讓國內移動套用開發進入一個新的時代,讓開發者用比較少的精力就能高效、美觀地完成移動套用開發。
目錄
第1章 React Native 1
1.1 React Native開發特點 2
1.1.1 一次學習,隨處編寫 2
1.1.2 混合開發 2
1.1.3 高效的移動套用開發 3
1.1.4 高效的移動套用開發調試 4
1.1.5 靈活高效的套用熱更新 4
1.1.6 有效降低移動套用安裝包體積 5
1.1.7 學習門檻低、開發難度低 5
1.1.8 開發軟硬體要求低 6
1.1.9 使用React Native開發的代價 6
1.2 React Native開發環境搭建 7
1.2.1 開發環境搭建起點 8
1.2.2 Windows作業系統下React Native開發環境搭建 8
1.2.3 蘋果作業系統下React Native開發環境搭建 10
1.2.4 查看與刪除使用npm命令安裝的軟體 11
1.3 代碼編輯環境搭建 11
1.3.1 Visual Studio Code 11
1.3.2 Sublime Text 3 11
1.3.4 WebStorm 13
1.4 鍵盤使用習慣 13
1.5 React Dev Tools安裝 14
第2章 狀態機思維與狀態機變數 17
2.1 初始化項目 17
2.1.1 初始化RN最新版項目 17
2.1.2 初始化RN舊版本項目 18
2.2 運行項目 19
2.2.1 使用Android手機調測準備事項 19
2.2.2 第一次運行Android平台RN項目 19
2.2.3 再次在Android平台運行RN項目 21
2.2.4 使用iPhone設備調試注意事項 22
2.2.5 首次在iOS平台運行RN項目 23
2.2.6 再次在iOS平台運行RN項目 27
2.2.7 Sublime Text 3對JSX語法的支持 27
2.2.8 修改JSX代碼 28
2.2.9 啟動調試工具 30
2.2.10 使用ADM工具調試 35
2.3 構建登錄頁面 37
2.4 React Native代碼執行邏輯 41
2.5 UI框架工作基本機制 41
2.5.1 狀態機思維 42
2.5.2 “冒充常量”的狀態機變數 44
2.5.3 “無處安放”的狀態機變數 45
2.5.4 “努力瘦身”的狀態機變數 46
2.6 React Native組件間通信 46
2.7 深入理解UI重新渲染的過程 47
2.7.1 合併狀態機變數 47
2.7.2 判斷是否渲染 49
2.7.3 強制啟動渲染 50
2.7.4 渲染過程 50
2.7.5 合併狀態機變數的最簡語法 50
2.8 React Native組件的成員變數 51
2.9 React Native組件的靜態變數、靜態函式 52
2.10 組件回調函式的綁定 52
第3章 頁面導航、彈出框及深入理解屬性 55
3.1 分離註冊組件、組件平台自適配 55
3.1.1 分離註冊組件 55
3.1.2 組件平台自適配 55
3.1.3 平台檢測 56
3.2 導航組件、掛接註冊組件 56
3.3 掛接註冊等待組件 58
3.4 Navigator組件 61
3.4.1 push與pop 61
3.4.2 replace函式 62
3.5 React Native中顏色類型的值 62
3.6 BackAndroid API 63
3.7 屬性確認 63
3.8 指定屬性默認值 66
3.9 Alert應用程式編程接口 66
3.9.1 彈出確認框 66
3.9.2 彈出選擇框 67
3.10 帶導航欄的頁面導航 69
第4章 混合開發基礎篇 70
4.1 iOS平台混合開發 70
4.1.1 與iOS 側原生代碼訊息互通 71
4.1.2 React Native代碼到iOS原生代碼的訊息 72
4.1.3 iOS 原生代碼到React Native代碼的訊息 75
4.1.4 與iOS OC原生代碼界面切換 77
4.1.5 套用初始界面設定 77
4.1.6 iOS混合開發中傳遞的參數類型 78
4.1.7 混合開發中的多執行緒使用 78
4.1.8 原生代碼實現Promise機制 79
4.1.9 跨語言常量 82
4.2 Android平台混合開發 82
4.2.1 與Android原生代碼訊息互通 83
4.2.2 React Native代碼到Android原生代碼的訊息 84
4.2.3 與Android原生代碼界面的切換 87
4.2.4 Android原生代碼到React Native代碼的訊息 91
4.2.5 套用初始界面設定 94
4.2.6 傳遞的參數類型 94
4.2.7 回調函式與Promise機制 95
4.2.8 監聽ActivityResult與Android生命周期事件 97
4.2.9 混合開發中的多執行緒機制 98
4.2.10 跨語言常量 98
第5章 flexbox布局、View、Image與可觸摸組件 100
5.1 flexbox布局 100
5.1.1 位置及寬、高相關樣式鍵 102
5.1.2 決定子組件排列規則的鍵 102
5.1.3 決定組件顯示規則的鍵 106
5.1.4 框線、空隙與填充 109
5.1.5 zIndex 110
5.1.6 組件多樣式聲明與動態樣式聲明 110
5.2 View組件 111
5.2.1 View組件的顏色與框線 111
5.2.2 View組件的陰影與其他視覺效果 113
5.2.3 View組件的變形 114
5.2.4 View組件的回調函式 117
5.2.5 View組件的其他屬性 119
5.2.6 設備放置狀態、根View與onLayout回調函式 120
5.2.7 pointerEvents屬性 123
5.3 Image組件 125
5.3.1 載入網路圖片 125
5.3.2 載入靜態圖片資源 127
5.3.3 載入資源檔案中的圖片 128
5.3.4 動態載入手機中的圖片資源 129
5.3.5 Image組件的樣式 129
5.3.6 Image組件顯示特性 131
5.3.7 Image組件的其他屬性 134
5.3.8 Image組件的快取 134
5.3.9 儘量使用網路圖片 135
5.4 可觸摸組件 135
5.4.1 可觸摸組件類型 135
5.4.2 TouchableOpacity組件 136
5.4.3 TouchableHighlight組件 137
5.4.4 其他屬性 138
5.5 使用導航欄的導航框架 139
5.5.1 導航欄自定義組件的實現 140
5.5.2 調用自定義組件 142
第6章 Text、TextInput等相關知識 145
6.1 Text組件 145
6.1.1 樣式鍵設定 145
6.1.2 其他屬性 147
6.1.3 Text組件的嵌套 149
6.1.4 文本顯示的陰影效果 150
6.1.5 Text居中顯示 151
6.1.6 在字元串中插入圖像 153
6.2 Text組件在兩個平台上的不同表現 155
6.2.1 只指定fontSize,不指定height 155
6.2.2 只指定height,不指定fontSize 156
6.2.3 fontSize等於height 156
6.2.4 height大於fontSize 156
6.2.5 框線在兩個平台上的不同表現 157
6.3 TextInput組件 158
6.3.1 TextInput組件樣式鍵 158
6.3.2 TextInput組件的屬性 158
6.3.3 TextInput組件iOS平台專有屬性 160
6.3.4 TextInput組件Android平台專有屬性 161
6.3.5 TextInput組件的成員函式 161
6.4 TextInput組件在兩個平台上的不同表現 161
6.4.1 Android平台的輸入下畫線 162
6.4.2 父組件的alignItems鍵失效 162
6.4.3 只指定fontSize,不指定height 164
6.4.4 height等於fontSize 164
6.4.5 height大於fontSize 164
6.4.6 框線在兩個平台上的不同表現 165
6.5 TextInput組件的生命周期 165
6.5.1 獲得焦點 165
6.5.2 用戶輸入 166
6.5.3 用戶按下提交鍵 166
6.5.4 失去焦點 166
6.5.5 生命周期中的其他事件 167
6.6 Keyboard API、軟鍵盤與鍵盤事件 168
6.6.1 Keyboard API 168
6.6.2 鍵盤事件處理例程 168
6.7 組件的引用 171
6.7.1 定義組件引用 171
6.7.2 得到系統定義的組件引用 171
6.7.3 調用組件的公開成員函式 172
6.7.4 重新設定組件的屬性 172
6.7.5 獲得組件的位置 174
6.8 跨平台狀態欄組件 175
6.8.1 StatusBar組件屬性 175
6.8.2 StatusBar組件使用示例 176
6.8.3 手機狀態欄在開發中的處理 176
6.9 高度自增長的擴展TextInput組件 177
6.10 訪問作業系統剪貼簿 179
第7章 組件生命周期、數據存儲及React Native套用實現步驟 182
7.1 組件生命周期 182
7.1.1 constructor 182
7.1.2 componentWillMount 182
7.1.3 componentDidMount 183
7.1.4 componentWillReceiveProps 183
7.1.5 shouldComponentUpdate 183
7.1.6 componentWillUpdate 184
7.1.7 componentDidUpdate 184
7.1.8 componentWillUnmount 184
7.2 讀取JSON檔案 185
7.3 數據持久化操作 186
7.3.1 寫入數據、錯誤捕捉 186
7.3.2 讀取數據 188
7.3.3 AsyncStorage API存儲數據的無序性 190
7.3.4 刪除數據 191
7.3.5 修改數據 192
7.3.6 JSON對象存儲 192
7.3.7 讀取JSON對象 193
7.4 數據表操作 193
7.5 React Native套用實現步驟、日記例程(上) 193
7.5.1 套用原型 194
7.5.2 基礎組件結構設計 195
7.5.3 使用React Native組件搭建靜態界面 197
7.5.4 React Native組件分層 204
7.5.5 實現各組件業務邏輯 206
7.5.6 日記例程(上)總結 206
第8章 ScrollView和ListView 218
8.1 ScrollView組件 218
8.1.1 ScrollView組件屬性 218
8.1.2 ScrollView組件iOS平台專有屬性 219
8.1.3 ScrollView組件Android平台專有屬性 220
8.1.4 ScrollView組件的公開成員函式 221
8.1.5 RefreshControl組件 221
8.1.6 ScrollView組件基本用法 222
8.2 ListView組件 224
8.2.1 ListView組件的回調函式 225
8.2.2 ListView組件的其他屬性 226
8.2.3 ListView組件的成員函式 226
8.3 簡單的列表 226
8.3.1 準備列表的數據源 227
8.3.2 聲明狀態機變數 227
8.3.3 將數據源中的數據複製到DataSource中 228
8.3.4 定義如何渲染列表中的每一行 228
8.3.5 實現簡單的列表 229
8.3.6 列表欄的高級處理 237
8.4 帶分段標誌的列表 237
8.4.1 準備數據源 238
8.4.2 聲明狀態機變數 238
8.4.3 將數據源中的數據複製到DataSource中 239
8.4.4 定義如何渲染每個分欄 240
8.4.5 定義如何渲染首、尾欄 240
8.4.6 列表間隔渲染 240
8.4.7 實現帶分段標誌的列表 241
8.4.8 總結 241
8.5 日記例程(下)總結 241
第9章 等待提示、進度條和Switch 242
9.1 ActivityIndicator組件 242
9.1.1 ActivityIndicator組件樣式設定 242
9.1.2 ActivityIndicator其他屬性 242
9.1.3 等待提示例程 242
9.2 iOS進度條組件 243
9.2.1 React Native框架中定時器的使用 243
9.2.2 ProgressViewIOS組件樣式設定 244
9.2.3 ProgressViewIOS其他屬性 244
9.2.4 iOS平台進度條 245
9.3 Android平台進度條組件 246
9.4 Switch組件 246
9.4.1 Switch組件樣式設定 246
9.4.2 Switch其他屬性 246
9.4.3 Switch組件的使用 247
第10章 導航組件與Modal 249
10.1 導航組件的屬性 249
10.1.1 回調函式 249
10.1.2 其他屬性 250
10.2 導航器 250
10.3 NavigationBar 251
10.4 導航例程 252
10.5 Modal組件 257
10.6 Modal組件與Navigator組件的配合 258
10.7 Modal組件例程 258
10.7.1 實現自定義Modal組件 258
10.7.2 使用自定義Modal組件 260
10.7.3 Modal組件與Alert組件 262
10.7.4 總結 262
第11章 手勢識別 263
11.1 PanResponder API 263
11.2 監視器 263
11.2.1 指定監視區域 264
11.2.2 定義監視器相關變數 264
11.2.3 準備監視器的事件處理函式 264
11.2.4 建立監視器 265
11.2.5 將監視器與監視區域掛接 265
11.3 監視事件的生命周期 265
11.3.1 單次點擊事件的生命周期 266
11.3.2 單次點擊事件處理 268
11.3.3 移動手勢事件的生命周期 268
11.3.4 監視器異常事件 270
11.4 手勢識別處理例程 270
11.4.1 單點手勢——點擊、拖動選擇百分比參數 270
11.4.2 單點手勢——帶導槽的滑動來電接聽或拒接界面 273
11.4.3 單點手勢——滑動解鎖螢幕界面 275
11.4.4 單點手勢——單點任意方向拉動選擇界面 277
11.4.5 兩點手勢 281
第12章 網路 282
12.1 獲取網路狀態 282
12.1.1 得到當前網路狀態 282
12.1.2 監聽網路狀態改變事件 283
12.1.3 簡單判斷是否有網路連線 284
12.1.4 判斷當前連線是否收費 284
12.2 搭建調試用HTTP、HTTPS伺服器 284
12.2.1 搭建HTTP測試伺服器 285
12.2.2 搭建HTTPS測試伺服器 285
12.3 通過HTTP、HTTPS與網路側交換數據 286
12.3.1 傳送請求 286
12.3.2 接收回響 288
12.3.3 HTTP通信完整例程 290
12.3.4 使用HTTP訊息向伺服器上傳手機中的照片 291
12.4 在React Native開發中使用AJAX技術 291
12.5 WebSocket 292
12.5.1 WebSocket伺服器的創建 292
12.5.2 在RN中使用WebSocket通信 293
12.6 推送 294
12.6.1 在Android平台上使用推送技術 294
12.6.2 在iOS平台上使用推送技術 295
12.7 Linking API 296
12.7.1 處理髮給本套用的連結 296
12.7.2 打開外部連結 297
第13章 網頁瀏覽器、音視頻媒體播放 299
13.1 WebView組件樣式設定 299
13.2 WebView組件其他屬性 299
13.2.1 非回調函式屬性 299
13.2.2 回調函式屬性 300
13.2.3 平台獨有屬性 300
13.2.4 WebView組件成員函式 301
13.3 網頁瀏覽器使用例程 301
13.3.1 瀏覽網頁例程 301
13.3.2 載入本地網頁例程 304
13.4 音視頻媒體播放 306
第14章 套用許可權與圖庫操作 307
14.1 套用許可權 307
14.1.1 iOS平台套用許可權 307
14.1.2 Android平台套用許可權 307
14.2 React Native開發中iOS平台程式庫的使用 310
14.3 獲取手機中所有的圖片信息 312
14.4 圖片信息詳解 314
14.4.1 Android平台圖片信息 314
14.4.2 iOS平台圖片信息 315
14.5 顯示從CameraRoll API得到的圖片 315
14.6 為用戶提供圖片選擇界面 316
14.7 圖片的保存與讀取顯示 318
14.7.1 保存圖片數據 319
14.7.2 讀取並顯示圖片 319
14.8 將圖片通過POST訊息上傳 320
14.8.1 搭建配合測試伺服器 320
14.8.2 上傳圖片例程 320
14.9 裁剪圖片 323
14.9.1 裁剪圖片 323
14.9.2 使用裁剪後的圖片 324
第15章 選擇器、位置相關和套用狀態 325
15.1 日期、時間選擇器 325
15.1.1 DatePickerAndroid API 325
15.1.2 TimePickerAndroid API 327
15.1.3 DatePickerIOS組件 328
15.2 Picker組件 330
15.2.1 Picker組件的樣式設定 330
15.2.2 Picker組件的屬性 330
15.2.3 Picker.Item組件的屬性 331
15.2.4 Picker組件例程 331
15.3 PickerIOS 334
15.4 Slider組件 336
15.5 AppState API 338
15.5.1 AppState API的用途與用法 338
15.5.2 AppState API例程 338
15.6 獲取地理位置 339
15.7 Vibration API 340
15.7.1 Android平台振動功能的實現 340
15.7.2 iOS平台振動功能的實現 341
15.8 地圖功能 342
第16章 RN開源組件 343
16.1 微軟熱更新開源平台——CodePush 343
16.1.1 安裝與註冊CodePush 343
16.1.2 CodePush相關命令 344
16.1.3 在RN項目中集成CodePush 345
16.1.4 CodePush使用注意事項 347
16.2 Google統計平台——Google Analytics 348
16.2.1 Google統計能力 348
16.2.2 註冊Google統計賬號 351
16.2.3 在RN中使用Google統計 352
16.3 極光推送組件 352
16.4 數據存儲 352
16.4.1 Realm移動平台 352
16.4.2 RN中檔案操作 353
16.4.3 RN中資料庫操作 353
16.5 圖像處理 353
16.6 微信開發組件 354
16.7 支付寶支付組件 354
16.8 獲取設備信息 354
16.9 國際化處理 355
第17章 混合開發高級篇 356
17.1 使用Objective-C語言創建私有的React Native組件 356
17.1.1 增加FLAnimatedImage程式庫 356
17.1.2 創建視圖管理類 358
17.1.3 封裝開原始碼中的視圖類 358
17.1.4 在React Native側調用私有組件 360
17.1.5 例程運行效果 362
17.2 使用Swift語言創建私有的React Native組件 363
17.2.1 整合開源項目 363
17.2.2 建立組件管理者和橋接頭檔案 366
17.2.3 Objective-C與React Native接口部分 367
17.2.4 使用Swift語言實現組件控制 368
17.2.5 在React Native側調用私有組件 370
17.2.6 例程運行效果 371
17.3 使用Android SDK創建私有的React Native組件 371
17.3.1 準備原生代碼UI組件 372
17.3.2 實現原生UI管理類 373
17.3.3 創建原生UI實例 374
17.3.4 實現對屬性的支持 374
17.3.5 建立原生UI包 374
17.3.6 註冊原生UI管理類 375
17.3.7 對應的React Native側實現 376
17.3.8 運行俯視視圖例程 377
第18章 項目配置、生成發布版本安裝包及其他 378
18.1 調試環境與正式運行環境的不同 378
18.2 iOS平台項目配置 379
18.3 iOS平台套用發布 383
18.4 Android平台項目配置 383
18.5 Android平台套用生成發布版本安裝包 385
18.5.1 生成發布密鑰 385
18.5.2 修改gradle配置檔案 385
18.5.3 生成發布版本安裝包 386
18.6 其他組件與API 386
18.6.1 動畫相關 386
18.6.2 其他未討論的組件與API 387
附錄A ECMAScript 2015語法參考 388
附錄B ES 5語法 395