目錄
前言
第1篇 React Native入門和基礎
第1章 為什么要學習React Native2
1.1 看透React Native2
1.1.1 React Native與React.js2
1.1.2 React Native的跨平臺3
1.1.3 解剖React Native應用的結構4
1.2 React Native的特點5
1.2.1 其一:Learn Once, Write Anywhere5
1.2.2 其二:簡單易學的開發(fā)語言6
1.2.3 其三:接近原生應用的性能和體驗7
1.2.4 其四:完善的生態(tài)系統(tǒng)7
1.3 搭建React Native開發(fā)環(huán)境9
1.3.1 安裝原生開發(fā)工具——Android9
1.3.2 安裝原生開發(fā)工具——iOS11
1.3.3 安裝Node.js12
1.3.4 安裝React Native13
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開發(fā)的基礎技術21
2.1 開發(fā)具備的基礎知識說明21
2.2 Git版本控制工具22
2.2.1 安裝Git22
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 實戰(zhàn)——設計一個電商App37
2.6.1 電商App的模塊劃分37
2.6.2 設計首頁布局41
2.6.3 實現(xiàn)搜索欄44
2.6.4 設計輪播廣告46
2.6.5 展示商品列表51
2.6.6 實現(xiàn)交互功能和狀態(tài)欄52
2.7 小結56
第2篇 React Native應用開發(fā)實戰(zhàn)
第3章 React Native的組件(1)58
3.1 創(chuàng)建新的電商App58
3.1.1 移植舊電商項目58
3.1.2 重構現(xiàn)有的代碼60
3.2 完善搜索框功能——TextInput組件64
3.2.1 搜索提示框64
3.2.2 調試搜索結果66
3.2.3 優(yōu)化搜索框樣式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 商品布局的優(yōu)化76
3.5 拖曳刷新列表——RefreshControl組件80
3.6 添加頁面跳轉功能——Navigator組件83
3.7 二級頁面的跳轉——TouchableOpacity組件86
3.8 實現(xiàn)頁面間的數(shù)據傳遞89
3.9 小結90
第4章 React Native的組件(2)91
4.1 只支持特定平臺的組件91
4.1.1 實現(xiàn)多頁面分頁TabBarIOS/ViewPagerAndroid91
4.1.2 加載指示器——ActivityIndicator96
4.1.3 地圖——MapView97
4.1.4 渲染——Picker98
4.1.5 選擇范圍——Slider99
4.1.6 開關組件——Switch100
4.1.7 打開網頁——WebView101
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 Layout115
5.1.3 Size Class適配116
5.2 iOS開發(fā)的調試技巧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.js125
6.1.1 什么是Node.js125
6.1.2 為什么選擇Node.js126
6.1.3 安裝和使用nvm128
6.1.4 Node.js的開發(fā)流程129
6.2 服務端接口的設計:RESTful132
6.3 實現(xiàn)電商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 網絡前后端交互的原理fetch145
6.5 App從服務器獲取數(shù)據146
6.5.1 獲取商品信息148
6.5.2 更新商品信息151
6.5.3 新建商品157
6.5.4 刪除商品158
6.6 App數(shù)據的本地化存儲160
6.6.1 AsyncStorage異步鍵值存儲160
6.6.2 SQLite數(shù)據庫164
6.6.3 Realm數(shù)據庫166
6.7 小結168
第7章 常用React Native API169
7.1 屏幕設置相關API169
7.1.1 獲取屏幕寬高——Dimensions API170
7.1.2 獲取屏幕分辨率——PixelRatio API173
7.2 動畫API174
7.2.1 RequestAnimationFrame API幀動畫175
7.2.2 LayoutAnimation API布局動畫177
7.2.3 Animated API高級動畫179
7.3 組件、React Native API、原生平臺API184
7.3.1 組件和API184
7.3.2 API和原生平臺API184
7.4 實現(xiàn)自己的Platform API185
7.4.1 支持iOS平臺186
7.4.2 支持Android平臺188
7.5 為應用添加更豐富的API189
7.5.1 提示框和編輯框——AlertIOS190
7.5.2 前后臺狀態(tài)變化——AppState193
7.5.3 Android物理“返回鍵”——BackAndroid195
7.5.4 日期和時間選擇器——DatePickerAndroid/TimePickerAndroid196
7.5.5 基于位置的Geolocation200
7.5.6 鍵盤事件——Keyboard202
7.5.