第1章 React Native 1
1.1 React Native開發特點 2
1.1.1 一次學習,隨處編寫 2
1.1.2 混閤開發 2
1.1.3 高效的UI開發 3
1.1.4 高效的UI調試 4
1.1.5 學習門檻低、開發難度低 4
1.1.6 開發軟硬件要求低 5
1.1.7 使用React Native開發的代價 5
1.1.8 為什麼React Native尚未流行 7
1.2 React Native開發環境搭建 7
1.2.1 開發環境搭建起點 7
1.2.2 Windows操作係統下React Native開發環境搭建 8
1.2.3 蘋果操作係統下React Native開發環境搭建 9
1.2.4 查看與刪除使用npm命令安裝的軟件 11
1.3 代碼編輯環境搭建 11
1.3.1 Sublime Text 3 11
1.3.2 開發用插件 11
1.3.3 Sublime界麵風格選擇 13
1.3.4 鍵盤使用習慣 13
1.4 React Native Dev tool安裝 14
第2章 狀態機思維與狀態機變量 16
2.1 初始化項目 16
2.2 運行項目 17
2.2.1 使用Android手機進行調測 18
2.2.2 使用iPhone手機或模擬器進行調測 21
2.2.3 修改JSX代碼 22
2.2.4 ES 6語法與ES 5語法 24
2.2.5 啓動調試工具 25
2.3 構建注冊頁麵 28
2.4 React Native代碼執行邏輯 32
2.5 UI框架工作基本機製 33
2.5.1 狀態機思維 33
2.5.2 “冒充常量”的狀態機變量 35
2.5.3 “無處安放”的狀態機變量 36
2.5.4 “努力瘦身”的狀態機變量 36
2.6 React Native組件間通信 37
2.7 深入理解UI重新渲染的過程 37
2.7.1 閤並狀態機變量 37
2.7.2 判斷是否渲染 40
2.7.3 替換狀態機變量 40
2.7.4 強製啓動渲染 41
2.7.5 渲染過程 41
2.7.6 閤並狀態機變量的最簡語法 41
2.8 React Native組件的成員變量 42
2.9 React Native組件的靜態變量、靜態函數 43
第3章 頁麵導航、彈齣框及深入理解屬性 44
3.1 分離注冊組件、組件平颱自適配 44
3.1.1 分離注冊組件 44
3.1.2 組件平颱自適配 44
3.1.3 平颱檢測 45
3.2 導航組件、掛接注冊組件 45
3.3 掛接注冊等待組件 47
3.4 Navigator組件工作機製 49
3.4.1 push與pop 50
3.4.2 replace函數 50
3.5 自定義組件 51
3.5.1 “彈齣一切框”的實現 51
3.5.2 React Native中顔色類型的值 53
3.5.3 掛接自定義組件 54
3.6 BackAndroid API的bug與解決辦法 56
3.7 屬性確認 58
3.8 指定屬性默認值 60
3.9 Alert應用程序編程接口 60
3.9.1 彈齣確認框 60
3.9.2 彈齣選擇框 61
3.10 帶導航欄的頁麵導航 62
第4章 混閤開發基礎篇 63
4.1 iOS平颱混閤開發 63
4.1.1 與iOS 側原生代碼消息互通 64
4.1.2 React Native代碼到iOS原生代碼的消息 65
4.1.3 iOS 原生代碼到React Native代碼的消息 68
4.1.4 與iOS OC原生代碼界麵的切換 69
4.1.5 應用初始界麵設定 69
4.1.6 iOS混閤開發中傳遞的參數類型 70
4.1.7 混閤開發中的多綫程使用 70
4.1.8 原生代碼實現Promise機製 71
4.1.9 跨語言常量 72
4.2 Android平颱混閤開發 73
4.2.1 與Android原生代碼消息互通 74
4.2.2 React Native代碼到Android原生代碼的消息 75
4.2.3 與Android原生代碼界麵的切換 78
4.2.4 Android原生代碼到React Native代碼的消息 82
4.2.5 應用初始界麵設定 86
4.2.6 傳遞的參數類型 86
4.2.7 迴調函數與Promise機製 86
4.2.8 監聽ActivityResult與Android生命周期事件 88
4.2.9 混閤開發中的多綫程機製 89
4.2.10 跨語言常量 89
第5章 flexbox布局、View、Image與可觸摸組件 90
5.1 flexbox布局 90
5.1.1 位置及寬、高相關樣式鍵 91
5.1.2 決定子組件排列規則的鍵 92
5.1.3 決定組件顯示規則的鍵 94
5.1.4 邊框、空隙與填充 95
5.1.5 組件多樣式聲明與動態樣式聲明 96
5.2 View組件 97
5.2.1 View組件的顔色與邊框 97
5.2.2 View組件的陰影與其他視覺效果 99
5.2.3 View組件的變形 101
5.2.4 View組件的迴調函數 104
5.2.5 View組件的其他屬性 106
5.2.6 設備放置狀態、根View與onLayout迴調函數 106
5.2.7 pointerEvents屬性 109
5.3 Image組件 111
5.3.1 加載網絡圖片 111
5.3.2 加載靜態圖片資源 112
5.3.3 加載資源文件中的圖片 112
5.3.4 動態加載手機中的圖片資源 112
5.3.5 Image組件的樣式 113
5.3.6 Image組件顯示特性 114
5.3.7 Image組件的其他屬性 117
5.4 可觸摸組件 117
5.4.1 可觸摸組件類型 118
5.4.2 TouchableOpacity組件 118
5.4.3 TouchableHighlight組件 118
5.4.4 其他屬性 120
5.5 加深理解三大組件 120
5.5.1 使用導航欄的導航框架 121
5.5.2 等比放大無丟失顯示圖片 125
5.5.3 寬、高動態變化的組件呈現 128
第6章 Text、TextInput等相關知識 129
6.1 Text組件 129
6.1.1 樣式鍵設置 129
6.1.2 其他屬性 131
6.1.3 Text組件的嵌套 131
6.1.4 文本顯示的陰影效果 132
6.1.5 Text居中顯示 133
6.1.6 在字符串中插入圖像 135
6.2 Text組件在兩個平颱上的不同錶現 136
6.2.1 隻指定fontSize,不指定height 137
6.2.2 隻指定height,不指定fontSize 137
6.2.3 fontSize等於height 137
6.2.4 height大於fontSize 138
6.2.5 邊框在兩個平颱上的不同錶現 138
6.3 TextInput組件 140
6.3.1 TextInput組件樣式鍵 140
6.3.2 TextInput組件的屬性 140
6.3.3 TextInput組件iOS平颱專有屬性 141
6.3.4 TextInput組件Android平颱專有屬性 142
6.3.5 TextInput組件的成員函數 142
6.4 TextInput組件在兩個平颱上的不同錶現 143
6.4.1 Android平颱的輸入下畫綫 143
6.4.2 父組件的alignItems鍵失效 144
6.4.3 隻指定fontSize、不指定height 145
6.4.4 height等於fontSize 145
6.4.5 height大於fontSize 146
6.4.6 邊框在兩個平颱上的不同錶現 146
6.5 TextInput組件的生命周期 147
6.5.1 獲得焦點 147
6.5.2 用戶輸入 147
6.5.3 用戶按下提交鍵 147
6.5.4 失去焦點 148
6.6 軟鍵盤與鍵盤事件 148
6.7 組件的引用 151
6.7.1 定義組件引用 151
6.7.2 得到係統定義的組件引用 151
6.7.3 調用組件的公開成員函數 152
6.7.4 重新設定組件的屬性 152
6.7.5 獲得組件的位置 154
6.8 跨平颱狀態欄組件 155
6.8.1 StatusBar組件屬性 155
6.8.2 StatusBar組件使用示例 156
6.8.3 手機狀態欄在開發中的處理 157
6.8.4 StatusBarIOS API 158
6.9 高度自增長的擴展TextInput組件 159
6.10 訪問操作係統剪貼闆 160
第7章 組件生命周期、數據存儲及React Native應用實現步驟 163
7.1 組件生命周期 163
7.1.1 getInitialState 163
7.1.2 getDefaultProps 163
7.1.3 componentWillMount 164
7.1.4 componentDidMount 164
7.1.5 componentWillReceiveProps 164
7.1.6 shouldComponentUpdate 165
7.1.7 componentWillUpdate 165
7.1.8 componentDidUpdate 165
7.1.9 componentWillUnmount 166
7.2 讀取JSON文件 166
7.3 數據持久化操作 167
7.3.1 flow語法檢查器 167
7.3.2 寫入數據、錯誤捕捉 168
7.3.3 讀取數據 170
7.3.4 AsyncStorage API存儲數據的無序性 173
7.3.5 刪除數據 173
7.3.6 修改數據 175
7.3.7 JSON對象存儲 175
7.3.8 讀取JSON對象 176
7.4 數據錶操作 176
7.5 React Native應用實現步驟、日記例程(上) 176
7.5.1 應用原型 177
7.5.2 基礎組件結構設計 178
7.5.3 使用React Native組件搭建靜態界麵 180
7.5.4 React Native組件分層 188
7.5.5 實現各組件業務邏輯 189
7.5.6 日記例程(上)總結 190
第8章 ScrollView和ListView 200
8.1 ScrollView組件 200
8.1.1 ScrollView組件屬性 200
8.1.2 ScrollView組件iOS平颱專有屬性 201
8.1.3 ScrollView組件Android平颱專有屬性 202
8.1.4 ScrollView組件的公開成員函數 203
8.1.5 RefreshControl組件 203
8.1.6 ScrollView組件基本用法 204
8.2 ListView組件 206
8.2.1 ListView組件的迴調函數 207
8.2.2 ListView組件的其他屬性 208
8.2.3 ListView組件的成員函數 208
8.3 簡單的列錶 208
8.3.1 準備列錶的數據源 209
8.3.2 聲明狀態機變量 209
8.3.3 將數據源中的數據拷貝到DataSource中 210
8.3.4 定義如何渲染列錶中的每一行 210
8.3.5 實現簡單的列錶 211
8.3.6 列錶欄的高級處理 217
8.4 帶分段標誌的列錶 217
8.4.1 準備數據源 218
8.4.2 聲明狀態機變量 218
8.4.3 將數據源中的數據拷貝到DataSource中 219
8.4.4 定義如何渲染每個分欄 219
8.4.5 定義如何渲染首、尾欄 220
8.4.6 列錶間隔渲染 220
8.4.7 實現帶分段標誌的列錶 220
8.4.8 總結 221
8.5 日記例程(下)總結 221
第9章 等待提示條、進度條和Switch 222
9.1 ProgressBarAndroid組件 222
9.1.1 ProgressBarAndroid組件樣式設置 222
9.1.2 ProgressBarAndroid其他屬性 222
9.1.3 Android平颱等待提示條 222
9.1.4 React Native框架中定時器的使用 224
9.1.5 Android平颱進度條 225
9.2 iOS進度條組件 226
9.2.1 ProgressViewIOS組件樣式設置 226
9.2.2 ProgressViewIOS其他屬性 226
9.2.3 iOS平颱進度條 226
9.3 iOS平颱等待提示條 227
9.3.1 ActivityIndicatorIOS組件樣式設置 227
9.3.2 ActivityIndicatorIOS其他屬性 227
9.3.3 iOS平颱等待提示條例程 227
9.4 Switch組件 229
9.4.1 Switch組件樣式設置 229
9.4.2 Switch其他屬性 229
9.4.3 Switch組件的使用 229
第10章 導航組件 231
10.1 導航組件的屬性 231
10.1.1 迴調函數 231
10.1.2 其他屬性 232
10.2 導航器 232
10.3 NavigationBar 233
第11章 手勢識彆 240
11.1 PanResponder API 240
11.2 監視器 240
11.2.1 指定監視區域 241
11.2.2 定義監視器相關變量 241
11.2.3 準備監視器的事件處理函數 241
11.2.4 建立監視器 242
11.2.5 將監視器與監視區域掛接 242
11.3 監視事件的生命周期 242
11.3.1 單次點擊事件的生命周期 243
11.3.2 單次點擊事件處理 245
11.3.3 移動手勢事件的生命周期 245
11.3.4 監視器異常事件 247
11.4 手勢識彆處理例程 247
11.4.1 單點手勢——點擊、拖動選擇百分比參數 247
11.4.2 單點手勢——帶導槽的滑動來電接聽或拒接界麵 249
11.4.3 單點手勢——滑動解鎖屏幕界麵 252
11.4.4 單點手勢——單點任意方嚮拉動選擇界麵 254
11.4.5 兩點手勢 257
第12章 網絡 258
12.1 獲取網絡狀態 258
12.1.1 得到當前網絡狀態 258
12.1.2 監聽網絡狀態改變事件 259
12.1.3 簡單判斷是否有網絡連接 260
12.1.4 判斷當前連接是否收費 260
12.2 通過HTTP、HTTPS與網絡側交換數據 260
12.2.1 發送請求 260
12.2.2 接收響應 263
12.3 在React Native開發中使用AJAX技術 264
第13章 網頁瀏覽器、音視頻媒體播放 266
13.1 WebView組件樣式設置 266
13.2 WebView組件其他屬性 266
13.2.1 非迴調函數屬性 266
13.2.2 迴調函數屬性 267
13.2.3 平颱獨有屬性 267
13.2.4 WebView組件成員函數 268
13.3 網頁瀏覽器使用例程 268
13.3.1 瀏覽網頁例程 268
13.3.2 加載本地網頁例程 271
13.4 音視頻媒體播放 273
第14章 圖片的遍曆、存取與顯示 274
14.1 React Native開發中iOS平颱鏈接庫的使用 274
14.2 獲取手機中所有的圖片信息 276
14.3 圖片信息詳解 278
14.3.1 Android平颱圖片信息 278
14.3.2 iOS平颱圖片信息 278
14.4 顯示從CameraRoll API得到的圖片 279
14.5 為用戶提供圖片選擇界麵 280
14.6 圖片的保存與讀取顯示 282
14.6.1 保存圖片數據 282
14.6.2 讀取並顯示圖片 283
第15章 選擇器、位置相關和應用狀態 284
15.1 日期、時間選擇器 284
15.1.1 DatePickerAndroid API 284
15.1.2 TimePickerAndroid API 286
15.1.3 DatePickerIOS組件 287
15.2 Picker組件 289
15.2.1 Picker組件的樣式設置 289
15.2.2 Picker組件的屬性 289
15.2.3 Picker.Item組件屬性 290
15.2.4 Picker組件例程 290
15.3 PickerIOS 294
15.4 MapView組件 295
15.4.1 MapView組件樣式設置 296
15.4.2 MapView組件特有的跨平颱屬性 296
15.4.3 MapView組件例程 297
15.5 AppState API 299
15.5.1 AppState API用途與用法 299
15.5.2 AppState API例程 299
15.6 獲取地理位置 300
15.7 VibrationIOS API 302
第16章 使用ES 6語法開發 303
16.1 React Native組件導入 303
16.2 屬性聲明 304
16.3 成員變量聲明 304
16.4 狀態機變量聲明 305
16.5 迴調函數綁定 306
16.6 類的靜態成員變量與靜態成員函數 307
第17章 混閤開發高級篇 309
17.1 使用Objective-C語言創建私有的React Native組件 309
17.1.1 增加FLAnimatedImage鏈接庫 309
17.1.2 創建視圖管理類 311
17.1.3 封裝開源代碼中的視圖類 312
17.1.4 在React Native側調用私有組件 314
17.1.5 例程運行效果 315
17.2 使用Swift語言創建私有的React Native組件 316
17.2.1 整閤開源項目 316
17.2.2 建立組件管理者和橋接頭文件 319
17.2.3 Objective-C與React Native接口部分 321
17.2.4 使用Swift語言實現組件控製 322
17.2.5 在React Native側調用私有組件 324
17.2.6 例程運行效果 325
17.3 使用Android SDK創建私有的React Native組件 325
17.3.1 準備原生代碼UI組件 326
17.3.2 實現原生UI管理類 327
17.3.3 創建原生UI實例 328
17.3.4 實現對屬性的支持 328
17.3.5 建立原生UI包 328
17.3.6 注冊原生UI管理類 329
17.3.7 對應的React Native側實現 329
17.3.8 運行俯視視圖例程 331
第18章 項目配置、生成發布版本安裝包及其他 332
18.1 iOS平颱項目配置 332
18.2 iOS平颱應用發布 336
18.3 Android平颱項目配置 336
18.4 Android平颱應用生成發布版本安裝包 338
18.4.1 生成發布密鑰 338
18.4.2 修改gradle配置文件 338
18.4.3 生成發布版本安裝包 339
18.5 其他組件與API 339
18.5.1 動畫相關 339
18.5.2 其他未討論的組件與API 340
附錄A ECMAScript 2015語法參考 341
· · · · · · (
收起)