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