本書由架構(gòu)師撰寫,包含ReactNative框架底層原理，以及與iOS、Android混合開發(fā)案例，精選了大量實例代碼,方便讀者快速學(xué)習(xí)。主要內(nèi)容分為兩大部分，第1部分“入門”包括第1~9章，介紹ReactNative框架的基本原理與使用方法；第2部分“進(jìn)階”包括第10~15章，介紹ReactNative框架的高階開發(fā)與App部署相關(guān)知識。附錄部分剖析了ReactNative的源碼，可幫助讀者研究ReactNative底層本質(zhì)，還分享了一些ReactNative框架學(xué)習(xí)的相關(guān)資源。本書適合移動App開發(fā)人員，深入學(xué)習(xí)ReactNative框架可以掌握開發(fā)一套ReactNative源碼同時部署到iOS平臺與Android平臺。本書的配套源代碼可以下載，地址是https://github.com/ParryQiu/ReactNative-Book-Demo。
本書由架構(gòu)師撰寫，融入了作者多年開發(fā)經(jīng)驗。包含React Native框架底層原理，以及與iOS、Android混合開發(fā)案例，精選了大量實例代碼,方便讀者快速學(xué)習(xí)。
Preface 前 言
從2015年React Native框架發(fā)布開始，我就關(guān)注React Native框架的發(fā)展，在得知React Native框架將同時支持iOS平臺與Android平臺的部署后，我們就開始著手將之前的項目從混合開發(fā)的方式慢慢轉(zhuǎn)移到使用React Native框架開發(fā)的方式上來。當(dāng)時國內(nèi)的React Native方面的資料非常少，很多難題的解決都需要查閱大量的國外文檔，正是在這個摸索的過程中，加深了對React Native框架的理解。
后來，我們的很多Web項目都在使用React框架，React正是React Native最底層的技術(shù)框架，同時也深深體會到只有理解底層架構(gòu)，才能對于很多表象的難題快速定位并找到解決方案。
本書基于我多年寫的技術(shù)博客以及使用React Native框架的實戰(zhàn)經(jīng)驗，我認(rèn)為底層的原理永遠(yuǎn)比一些組件的使用方法更重要，所以本書介紹了大量框架底層原理。通過閱讀本書你會發(fā)現(xiàn)掌握框架后，組件和API的使用將變得非常簡單，希望你在學(xué)習(xí)時能體會到這種觸類旁通的感覺。
本書主要內(nèi)容
本書分為兩大部分，第Ⅰ部分“入門”包括第1～9章，介紹React Native框架的基本原理與使用；第Ⅱ部分“進(jìn)階”包括第10～15章，介紹React Native框架的高階開發(fā)與App部署相關(guān)知識。
第1章介紹React與React Native框架產(chǎn)生的背景與原理，以及開發(fā)優(yōu)勢。
第2章介紹Node.js框架，并實戰(zhàn)演示了React Native開發(fā)環(huán)境的安裝與配置。
第3章介紹React Native框架的構(gòu)成、工作原理、組件間通信以及生命周期，包括代碼實戰(zhàn)演示。
第4章介紹React Native頁面布局開發(fā)使用的CSS Flex，幫助讀者掌握好React Native框架中元素布局的基本方法。
第5章介紹React Native框架下iOS平臺與Android平臺環(huán)境配置與代碼調(diào)試的方法，并對React Native框架的調(diào)試工具以及借助Chrome進(jìn)行遠(yuǎn)程調(diào)試的方法進(jìn)行了實戰(zhàn)講解。
第6章介紹React Native框架中常用的組件，如View、TabBar、NavigatorIOS、Image、Text、TextInput、WebView、ScrollView等。同時介紹了iOS平臺與Android平臺的適配以及更適合的第三方組件。
第7章介紹React Native框架重點API的使用，包括提示框、App運行狀態(tài)、異步存儲、相機(jī)與相冊、地理位置信息、設(shè)備網(wǎng)絡(luò)信息等API，希望讀者熟練掌握這些基礎(chǔ)API，進(jìn)而能舉一反三。
第8章介紹React Native框架下的網(wǎng)絡(luò)請求以及列表數(shù)據(jù)的綁定，這是開發(fā)App需要使用的技術(shù)重點。
第9章介紹React Native開發(fā)生態(tài)下一些常用的第三方組件，通過代碼實戰(zhàn)的方式進(jìn)行講解，并介紹了如何快速地找到自己的項目需要使用的第三方組件。
第10章結(jié)合iOS與Android平臺深入講解了React Native框架的底層運行原理，并分別介紹了兩個平臺的部署與測試方法。
第11章介紹React Native框架下iOS平臺的混合開發(fā)方法，通過混合開發(fā)，你可以在React Native框架下訪問任何iOS原生平臺。
第12章介紹React Native框架下Android平臺的混合開發(fā)方法，以及案例分析。
第13章詳細(xì)講解React Native框架下iOS平臺與Android平臺的消息推送原理，并介紹兩個平臺的消息推送實戰(zhàn)。
第14章介紹項目最終打包前App的圖標(biāo)與啟動圖的設(shè)置，并介紹了如何通過第三方工具快速生成這些相關(guān)資源。
第15章介紹React Native性能調(diào)優(yōu)的方法與技巧，以便在App上架前測試以及后期App遇到性能問題時可以快速定位到問題所在。
本書附錄簡單剖析了React Native的源碼，希望能幫助你深入研究React Native框架的源碼，以便能探究其底層本質(zhì)。同時也分享了一些學(xué)習(xí)React Native框架的相關(guān)資源。
本書的讀者對象
各類移動App開發(fā)人員，學(xué)習(xí)React Native框架可以使你開發(fā)一套React Native源碼同時部署到iOS平臺與Android平臺。
想進(jìn)入移動App開發(fā)領(lǐng)域的初學(xué)者，React Native框架比Android和iOS兩個原生平臺的技術(shù)門檻低很多，只需掌握HTML、CSS、JavaScript相關(guān)知識點就可以動手開發(fā)跨平臺的移動App。
已經(jīng)在使用React Native框架開發(fā)移動App的開發(fā)人員，書中講解了React Native框架的底層原理，以及與iOS平臺、Android平臺的高階混合開發(fā)部分，完全用代碼進(jìn)行講解，學(xué)習(xí)起來更加直觀。
本書配套源代碼
本書的配套源代碼都可以在https://github.com/ParryQiu/ReactNative-Book-Demo下載。
后續(xù)如果遇到React Native框架的大升級，我同樣會在此代碼庫中相應(yīng)地更新實戰(zhàn)演示的代碼。
致謝
首先感謝多年來共事過的同事們、領(lǐng)導(dǎo)們，多年來容忍我在一些技術(shù)問題上吹毛求疵，給了我很多好的建議和思路啟發(fā)。還要感謝吳怡編輯，從約稿到審稿，都體現(xiàn)了她的認(rèn)真態(tài)度和專業(yè)知識，她能一針見血地指出問題所在，促使我更加認(rèn)真、專業(yè)地去編寫此書。
在編寫的過程中，雖然對于每一個知識點我都查閱了大量的相關(guān)文檔，但是本書涉及海量的知識點，難免會有疏漏，懇請各位讀者斧正。
邱鵬源
2018年 4月
邱鵬源，商業(yè)數(shù)據(jù)提供商咕咕數(shù)據(jù)創(chuàng)始人，前咕咕監(jiān)控、飯媽媽創(chuàng)始人。從事軟件研發(fā)一線工作已 10 年，擁有豐富的前端、后端以及移動 App 開發(fā)經(jīng)驗，主導(dǎo)過多款基于 React Native 框架的商業(yè) App 設(shè)計與研發(fā)工作。慕課網(wǎng)實戰(zhàn)課程講師，出品視頻課程《React.js 入門與實戰(zhàn)》等。一直堅持在個人技術(shù)博客中分享大量的軟件開發(fā)文章與視頻教程。個人站點：http://parryqiu.com。
目錄 Contents
前言
第Ⅰ部分 入門
第1章 React與React Native簡介2
1.1 React簡介2
1.2 React Native 簡介9
1.3 React Native 前置知識點11
第2章 Node.js 簡介與開發(fā)環(huán)境配置13
2.1 Node.js與npm簡介13
2.2 React Native開發(fā)環(huán)境配置15
2.2.1 安裝Node.js16
2.2.2 安裝React Native18
2.2.3 代碼編輯器以及推薦插件22
第3章 React Native工作原理與生命周期25
3.1 React Native框架及工作原理25
3.1.1 React Native與原生平臺通信27
3.1.2 組件間通信27
3.2 React Native中的生命周期31
3.3 本章小結(jié)35
第4章 React Native頁面布局36
4.1 CSS 3簡介36
4.2 Flex彈性盒模型37
4.3 Flex屬性詳解與實例39
4.3.1 justify-content屬性40
4.3.2 align-items屬性42
4.3.3 align-self 屬性45
4.3.4 flex-direction 屬性48
4.3.5 flex-basis屬性51
4.3.6 flex-wrap屬性52
4.3.7 align-content 屬性54
4.3.8 flex-grow 屬性58
4.3.9 flex-shrink 屬性60
4.3.10 order屬性63
4.3.11 flex-flow屬性64
4.3.12 flex屬性64
4.4 React Native中的Flex屬性65
4.5 本章小結(jié)65
第5章 React Native開發(fā)調(diào)試技巧與工具66
5.1 配置iOS開發(fā)環(huán)境66
5.2 配置 Android 開發(fā)環(huán)境70
5.3 常用調(diào)試屬性的說明73
5.4 Chrome 中遠(yuǎn)程調(diào)試代碼77
5.5 React Developer Tools 工具安裝與應(yīng)用80
5.6 本章小結(jié)82
第6章 React Native 組件詳解83
6.1 React Native組件簡介83
6.2 視圖組件86
6.2.1 View組件介紹86
6.2.2 View組件實例87
6.3 底部導(dǎo)航 TabBar 組件92
6.3.1 TabBar 組件介紹92
6.3.2 iOS平臺下TabBarIOS組件實例94
6.3.3 Android 平臺下TabBar組件實例99
6.4 iOS 與 Android 的頁面跳轉(zhuǎn)102
6.4.1 NavigatorIOS 組件介紹102
6.4.2 NavigatorIOS組件實例104
6.4.3 react-native-navigation組件介紹108
6.4.4 react-native-navigation組件實例110
6.5 Image組件111
6.5.1 Image組件介紹111
6.5.2 Image組件實例112
6.6 Text組件114
6.6.1 Text組件介紹114
6.6.2 Text組件基本使用116
6.6.3 Text組件嵌套117
6.6.4 Text組件樣式統(tǒng)一119
6.7 TextInput 組件122
6.7.1 TextInput 組件介紹122
6.7.2 TextInput 組件實例124
6.8 觸摸處理類組件130
6.8.1 TouchableHighlight 組件介紹130
6.8.2 TouchableHighlight 組件實例131
6.8.3 TouchableNativeFeedback 組件介紹132
6.8.4 TouchableNativeFeedback 組件實例133
6.8.5 TouchableOpacity組件介紹133
6.8.6 TouchableOpacity 組件實例134
6.8.7 TouchableWithoutFeedback組件介紹134
6.9 Web View組件135
6.9.1 WebView 組件介紹135
6.9.2 WebView 組件實例137
6.10 ScrollView組件139
6.10.1 ScrollView 組件介紹139
6.10.2 ScrollView組件實例140
6.11 本章小結(jié)142
第7章 React Native API詳解143
7.1 React Native API簡介143
7.2 提示框145
7.2.1 Alert 介紹145
7.2.2 Alert實例145
7.3 App運行狀態(tài)150
7.3.1 AppState 介紹150
7.3.2 AppState 實例150
7.4 異步存儲152
7.4.1 AsyncStorage 介紹152
7.4.2 AsyncStorage 實例154
7.4.3 登錄狀態(tài)處理159
7.5 相機(jī)與相冊API161
7.5.1 CameraRoll介紹161
7.5.2 相冊/相機(jī)組件實例161
7.6 地理位置信息168
7.6.1 Geolocation介紹168
7.6.2 Geolocation實例169
7.7 設(shè)備網(wǎng)絡(luò)信息175
7.7.1 NetInfo介紹175
7.7.2 NetInfo實例175
7.8 本章小結(jié)178
第8章 React Native網(wǎng)絡(luò)請求詳解179
8.1 RESTful API 簡介179
8.2 React Native 中的網(wǎng)絡(luò)請求180
8.3 ListView 組件184
8.4 React Native 網(wǎng)絡(luò)請求與列表綁定方案186
8.5 本章小結(jié)192
第9章 常用React Native開源組件詳解193
9.1 React Native 熱門資源列表194
9.2 React Native 接入微博、微信、QQ 登錄196
9.3 更加美觀的組件庫200
9.4 React Native圖表202
9.5 react-native-gifted-listview205
9.6 react-native-vector-icons207
9.7 本章小結(jié)210
第Ⅱ部分 進(jìn)階
第10章 React Native運行原理與部署調(diào)試214
10.1 React Native運行原理214
10.2 iOS平臺部署與調(diào)試220
10.3 Android平臺部署與調(diào)試225
10.4 Android模擬器簡介230
10.5 本章小結(jié)233
第11章 iOS平臺與React Native混合開發(fā)234
11.1 iOS平臺混合開發(fā)簡介234
11.2 iOS平臺混合開發(fā)原理詳解235
11.2.1 iOS原生代碼實現(xiàn)235
11.2.2 iOS項目編譯設(shè)置237
11.2.3 React Native中調(diào)用混合開發(fā)代碼239
11.2.4 iOS平臺混合開發(fā)特性詳解241
11.3 iOS平臺混合開發(fā)實例249
11.3.1 iOS原生代碼實現(xiàn)249
11.3.2 React Native調(diào)用混合開發(fā)代碼250
11.4 本章小結(jié)252
第12章 Android平臺與React Native混合開發(fā)253
12.1 Android平臺混合開發(fā)簡介253
12.2 Android平臺混合開發(fā)原理詳解254
12.2.1 Android原生代碼實現(xiàn)254
12.2.2 Android原生模塊注
書單推薦
