React Native 移動開發實戰 React Native移动开发实战

袁林，2010年畢業於南京郵電大學。畢業後一直從事移動App研發工作，先後服務於中興通訊、三星電子和南京企友等公司。歷任App高級工程師、項目經理等職位。具備豐富的Node.js後端服務構建、Native客戶端開發和ReactNative客戶端開發經驗。長期致力於應用各種IT新技術提升生產效率和解決實際問題。曾經帶隊自主研發多個電信級企業應用。

前言

第1篇ReactNative入門和基礎

第1章為什麼要學習ReactNative2 
1.1看透ReactNative2 
1.1.1ReactNative與React.js2 
1.1.2ReactNative的跨平台3 
1.1.3解剖ReactNative應用的結構4 
1.2ReactNative的特點5 
1.2.1其一：LearnOnce，WriteAnywhere5 
1.2.2其二：簡單易學的開發語言6 
1.2.3其三：接近原生應用的性能和體驗7 
1.2.4其四：完善的生態系統7 
1.3搭建ReactNative開發環境9 
1.3. 1安裝原生開發工具——Android9 
1.3.2安裝原生開發工具——iOS11 
1.3.3安裝Node.js12 
1.3.4安裝ReactNative13 
1.3.5安裝其他輔助工具14 
1.4第一個ReactNative應用16 
1.4.1初始化項目16 
1.4.2運行項目17 
1.4.3調試項目18 
1.5小試牛刀——更改ReactNative項目源碼18 
1.6小結20 

第2章全局解析ReactNative開發的基礎技術21 
2.1開發具備的基礎知識說明21 
2.2Git版本控制工具22 
2.2.1安裝Git22 
2.2.2Git常用命令22 
2.3ReactNative的JSX解決方案24 
2.4ReactNative的Flexbox佈局25 
2.4.1flexDirection設 置組件的排列26 
2.4.2flexWrap設置是否換行28 
2.4.3justifyContent設置橫向排列位置30 
2.4.4alignItems設置縱向排列位置31 
2.4.5alignSelf設置特定組件的排列33 
2.4.6flex設置組件所佔空間34 
2.5如何調試ReactNative項目35 
2.6實戰——設計一個電商App37 
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篇ReactNative應用開發實戰

第3章ReactNative的組件（1）58 
3.1創建新的電商App58 
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章ReactNative的組件（2）91 
4.1只支持特定平台的組件91 
4.1.1實現多頁面分頁TabBarIOS／ViewPagerAndroid91 
4.1.2加載指示器——ActivityIndi​​cator96 
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.1react—native—swiper的使用103 
4.2.2NativeBase的使用104 
4.2.3NativeBase如何解決跨平台問題111 
4.3小結113 

第5章原生平台的適配和調試114 
5.1iOS平台的適配114 
5.1.1Images.xcassets適配115 
5.1.2自動佈局AutoLayout115 
5.1.3SizeClass適配116 
5.2iOS開發的調試技巧117 
5.3Android平台的適配118 
5.3.1適配原理118 
5.3.2常用的適配屬性119 
5.4Android平台的調試技巧12 2 
5.5小結124 

第6章ReactNative的服務器端處理125 
6.1學習Node.js125 
6.1.1什麼是Node.js125 
6.1.2為什麼選擇Node.js126 
6.1.3安裝和使用nvm128 
6.1.4Node.js的開發流程129 
6.2服務端接口的設計：RESTful132 
6.3實現電商App的服務器端接口133 
6.3.1Express框架133 
6.3.2查詢商品接口138 
6.3.3新建商品接口142 
6.3.4更新商品接口143 
6.3.5刪除商品接口144 
6.4網絡前後端交互的原理fetch145 
6.5App從服務器獲取數據146 
6.5.1獲取商品信息148 
6.5.2更新商品信息151 
6.5.3新建商品157 
6.5.4刪除商品158 
6.6App數據的本地化存儲160 
6.6.1AsyncStorage異步鍵值存儲160 
6.6.2SQLite數據庫164 
6.6.3Realm數據庫166 
6.7小結168 

第7章常用ReactNativeAPI169 
7.1屏幕設置相關API169 
7.1.1獲取屏幕寬高——DimensionsAPI170 
7.1.2獲取屏幕分辨率—— PixelRatioAPI173 
7.2動畫API174 
7.2.1RequestAnimationFrameAPI幀動畫175 
7.2.2LayoutAnimationAPI佈局動畫177 
7.2.3AnimatedAPI高級動畫179 
7.3組 、ReactNativeAPI、原生平台API184 
7.3.1組件和API184 
7.3.2API和原生平台API184 
7.4實現自己的PlatformAPI185 
7.4.1支持iOS平台186 
7.4.2支持Android平台188 
7.5為應用添加更豐富的API189 
7.5.1提示框和編輯框——AlertIOS190 
7.5.2前後台狀態變化——AppState193 
7.5.3Android物理“返回鍵”——BackAndroid195 
7.5.4日期和時間選擇器——DatePickerAndroid／TimePickerAndroid196 
7.5.5基於位置的Geolocation200 
7.5. 6鍵盤事件——Keyboard202 
7.5.7設備聯網狀態——NetInfo 
7.5.8權限設置——PermissionsAndroid 
7.5.9懸浮提示框——ToastAndroid 
7.6小結

第3篇ReactNative混合編程

第8章ReactNative與原生平台混合編程（ 1）
8.1創建並移植項目
8.2訪問設備
8.2.1訪問iOS設備
8.2.2防問Android設備
8.3訪問相冊
8.3.1讀取iOS相冊中的圖片
8.3.2讀取Android相冊中的圖片
8.4ReactNative與原生平台的通信原理
8.5ReactNative平台調用原生頁面
8.5.1ReactNative平台調用原生iOS頁 
8.5.2ReactNative平台調用原生Android頁面
8.6原生平台調用ReactNative組件
8.6.1iOS平台調用ReactNative組件
8.6.2Android平台調用ReactNative組件
8.7小結
…… 
第9章ReactNative與原生平台混合編程（2）
第10章電商App的複盤
第4篇App的發布和更新
第11章App的發布
第12章App的熱部署
附錄AES6語法