《React Native移動開發實戰》是2017年機械工業出版社出版的圖書,作者是袁林。
基本介紹
- 中文名:React Native移動開發實戰
- 作者:袁林
- 出版時間:2017年7月
- 出版社:機械工業出版社
- ISBN:9787111571797
- 類別:計算機/網路類圖書
- 定價:69.00 元
- 開本:16 開
- 裝幀:精裝
- 版次:1/1
內容簡介,圖書目錄,本書精華內容,作者簡介,
內容簡介
本書以實戰開發為主旨,以React Native套用開發為主線,以iOS和Android雙平台開發為副線,通過完整的電商類App項目案例,詳細地介紹了React Native套用開發所涉及的知識,讓讀者全面、深入、透徹地理解React Native的主流開發方法,從而提升實戰開發水平和項目開發能力。
本書共12章,分為4篇,涵蓋的主要內容有搭建開發環境、Nuclide、各種命令行工具(Git、Node.js)、布局與調試、組件、API、第三方組件、基於Node.js的伺服器、fetch API、AsyncStorage/SQLite/Realm資料庫存儲、原生平台接口開發、redux開發框架、套用打包與發布、熱更新與CodePush等。
本書適合iOS和Android原生平台套用開發者,以及有興趣加入移動平台開發的JavaScript開發者閱讀。當然,本書也適合相關院校和社會培訓學校作為移動開發的教材使用
圖書目錄
第1篇 React Native入門和基礎
第1章 為什麼要學習React Native 2
1.1 看透React Native 2
1.1.1 React Native與React.js 2
1.1.2 React Native的跨平台 3
1.1.3 解剖React Native套用的結構 4
1.2 React Native的特點 5
1.2.1 其一:Learn Once, Write Anywhere 5
1.2.2 其二:簡單易學的開發語言 6
1.2.3 其三:接近原生套用的性能和體驗 7
1.2.4 其四:完善的生態系統 7
1.3 搭建React Native開發環境 9
1.3.1 安裝原生開發工具——Android 9
1.3.2 安裝原生開發工具——iOS 11
1.3.3 安裝Node.js 12
1.3.4 安裝React Native 13
1.3.5 安裝其他輔助工具 14
1.4 第一個React Native套用 16
1.4.1 初始化項目 16
1.4.2 運行項目 17
1.4.3 調試項目 18
1.5 小試牛刀——更改React Native項目源碼 18
1.6 小結 20
第2章 全局解析React Native開發的基礎技術 21
2.1 開發具備的基礎知識說明 21
2.2 Git版本控制工具 22
2.2.1 安裝Git 22
2.2.2 Git常用命令 22
2.3 React Native的JSX解決方案 24
2.4 React Native的Flexbox布局 25
2.4.1 flexDirection設定組件的排列 26
2.4.2 flexWrap設定是否換行 28
2.4.3 justifyContent設定橫向排列位置 30
2.4.4 alignItems設定縱向排列位置 31
2.4.5 alignSelf設定特定組件的排列 33
2.4.6 flex設定組件所占空間 34
2.5 如何調試React Native項目 35
2.6 實戰——設計一個電商App 37
2.6.1 電商App的模組劃分 37
2.6.2 設計首頁布局 41
2.6.3 實現搜尋欄 44
2.6.4 設計輪播廣告 46
2.6.5 展示商品列表 51
2.6.6 實現互動功能和狀態欄 52
2.7 小結 56
第2篇 React Native套用開發實戰
第3章 React Native的組件(1) 58
3.1 創建新的電商App 58
3.1.1 移植舊電商項目 58
3.1.2 重構現有的代碼 60
3.2 完善搜尋框功能——TextInput組件 64
3.2.1 搜尋提示框 64
3.2.2 調試搜尋結果 66
3.2.3 最佳化搜尋框樣式 67
3.3 完善輪播廣告——Image組件 68
3.3.1 使用網路圖片 68
3.3.2 使用本地圖片 69
3.3.3 添加指示器組件 71
3.4 完善商品列表——ListView組件 73
3.4.1 對圖片資源進行重構 74
3.4.2 重新定義商品模型 75
3.4.3 商品布局的最佳化 76
3.5 拖曳刷新列表——RefreshControl組件 80
3.6 添加頁面跳轉功能——Navigator組件 83
3.7 二級頁面的跳轉——TouchableOpacity組件 86
3.8 實現頁面間的數據傳遞 89
3.9 小結 90
第4章 React Native的組件(2) 91
4.1 只支持特定平台的組件 91
4.1.1 實現多頁面分頁TabBarIOS/ViewPagerAndroid 91
4.1.2 載入指示器——ActivityIndicator 96
4.1.3 地圖——MapView 97
4.1.4 渲染——Picker 98
4.1.5 選擇範圍——Slider 99
4.1.6 開關組件——Switch 100
4.1.7 打開網頁——WebView 101
4.2 第三方組件 102
4.2.1 react-native-swiper的使用 103
4.2.2 NativeBase的使用 104
4.2.3 NativeBase如何解決跨平台問題 111
4.3 小結 113
第5章 原生平台的適配和調試 114
5.1 iOS平台的適配 114
5.1.1 Images.xcassets適配 115
5.1.2 自動布局Auto Layout 115
5.1.3 Size Class適配 116
5.2 iOS開發的調試技巧 117
5.3 Android平台的適配 118
5.3.1 適配原理 118
5.3.2 常用的適配屬性 119
5.4 Android平台的調試技巧 122
5.5 小結 124
第6章 React Native的伺服器端處理 125
6.1 學習Node.js 125
6.1.1 什麼是Node.js 125
6.1.2 為什麼選擇Node.js 126
6.1.3 安裝和使用nvm 128
6.1.4 Node.js的開發流程 129
6.2 服務端接口的設計:RESTful 132
6.3 實現電商App的伺服器端接口 133
6.3.1 Express框架 133
6.3.2 查詢商品接口 138
6.3.3 新建商品接口 142
6.3.4 更新商品接口 143
6.3.5 刪除商品接口 144
6.4 網路前後端互動的原理fetch 145
6.5 App從伺服器獲取數據 146
6.5.1 獲取商品信息 148
6.5.2 更新商品信息 151
6.5.3 新建商品 157
6.5.4 刪除商品 158
6.6 App數據的本地化存儲 160
6.6.1 AsyncStorage異步鍵值存儲 160
6.6.2 SQLite資料庫 164
6.6.3 Realm資料庫 166
6.7 小結 168
第7章 常用React Native API 169
7.1 螢幕設定相關API 169
7.1.1 獲取螢幕寬高——Dimensions API 170
7.1.2 獲取螢幕解析度——PixelRatio API 173
7.2 動畫API 174
7.2.1 RequestAnimationFrame API幀動畫 175
7.2.2 LayoutAnimation API布局動畫 177
7.2.3 Animated API高級動畫 179
7.3 組件、React Native API、原生平台API 184
7.3.1 組件和API 184
7.3.2 API和原生平台API 184
7.4 實現自己的Platform API 185
7.4.1 支持iOS平台 186
7.4.2 支持Android平台 188
7.5 為套用添加更豐富的API 189
7.5.1 提示框和編輯框——AlertIOS 190
7.5.2 前後台狀態變化——AppState 193
7.5.3 Android物理“返回鍵”——BackAndroid 195
7.5.4 日期和時間選擇器——DatePickerAndroid/TimePickerAndroid 196
7.5.5 基於位置的Geolocation 200
7.5.6 鍵盤事件——Keyboard 202
7.5.7 設備聯網狀態——NetInfo 204
7.5.8 許可權設定——PermissionsAndroid 205
7.5.9 懸浮提示框——ToastAndroid 207
7.6 小結 208
第3篇 React Native混合編程
第8章 React Native與原生平台混合編程(1) 210
8.1 創建並移植項目 210
8.2 訪問設備 211
8.2.1 訪問iOS設備 213
8.2.2 訪問Android設備 214
8.3 訪問相冊 217
8.3.1 讀取iOS相冊中的圖片 219
8.3.2 讀取Android相冊中的圖片 224
8.4 React Native與原生平台的通信原理 228
8.5 React Native平台調用原生頁面 229
8.5.1 React Native平台調用原生iOS頁面 231
8.5.2 React Native平台調用原生Android頁面 234
8.6 原生平台調用React Native組件 238
8.6.1 iOS平台調用React Native組件 238
8.6.2 Android平台調用React Native組件 239
8.7 小結 240
第9章 React Native與原生平台混合編程(2) 241
9.1 使用相機拍攝圖片 241
9.1.1 使用iOS相機拍攝 241
9.1.2 使用Android相機拍攝 244
9.2 添加圖片選擇提示框 247
9.2.1 iOS平台的提示 247
9.2.2 Android平台的提示 249
9.3 重構圖片選擇庫 251
9.3.1 iOS平台的重構 251
9.3.2 Android平台的重構 253
9.4 向iOS項目中添加React Native支持 256
9.4.1 新建iOS項目 256
9.4.2 新建React Native項目 257
9.4.3 在iOS頁面打開React Native組件 259
9.5 向Android項目中添加React Native支持 261
9.5.1 新建Android項目 261
9.5.2 新建React Native項目 261
9.5.3 在Android頁面打開React Native組件 262
9.6 小結 264
第10章 電商App的復盤 265
10.1 電商App的檔案 265
10.1.1 JavaScript檔案 266
10.1.2 iOS原生代碼檔案 266
10.1.3 Android原生代碼檔案 267
10.2 電商App的結構 267
10.2.1 Flexbox的整體布局 268
10.2.2 套用的邏輯結構 268
10.2.3 套用的通信過程 269
10.3 最佳化和改進 270
10.3.1 redux是什麼 270
10.3.2 redux代碼示例 271
10.3.3 redux生態 274
10.4 用到的組件 275
10.5 小結 276
第4篇 App的發布和更新
第11章 App的發布 278
11.1 App Store蘋果套用商店 278
11.1.1 加入開發者計畫 278
11.1.2 生成發布證書 280
11.1.3 註冊App ID 283
11.1.4 生成描述檔案 283
11.1.5 打包套用 284
11.1.6 發布到App Store 284
11.2 Android套用商店 285
11.2.1 生成簽名檔案 285
11.2.2 打包套用 287
11.2.3 發布到套用商店 288
11.3 小結 289
第12章 App的熱部署 290
12.1 什麼是熱部署 290
12.2 解析React Native套用的工作原理 290
12.3 實現React Native的熱部署 292
12.3.1 服務端實現 292
12.3.2 客戶端實現 292
12.4 微軟的熱部署方案CodePush 295
12.4.1 CodePush簡介 295
12.4.2 CodePush安裝和註冊 295
12.4.3 集成CodePush SDK 297
12.4.4 更改iOS套用 297
12.4.5 更改Android套用 301
12.5 小結 303
附錄A ES 6語法 304
本書精華內容
React Native的優勢
搭建React Native開發環境
React Native開發基礎知識
React Native的組件
原生平台的適配和調試
React Native的伺服器端處理
常用React Native API
React Native與原生平台混合編程
電商App的復盤
App的發布
App的熱部署
ES 6語法
作者簡介
袁林 2010年畢業於南京郵電大學。畢業後一直從事移動App研發工作,先後服務於中興通訊、三星電子和南京企友等公司。歷任App高級工程師、項目經理等職位。具備豐富的Node.js後端服務構建、Native客戶端開發和React Native客戶端開發經驗。長期致力於套用各種IT新技術提升生產效率和解決實際問題。曾經帶隊自主研發多個電信級企業套用。