React Native是Facebook公司推出的強(qiáng)大的、開源的跨平臺移動應(yīng)用開發(fā)框架。它能大幅減少跨平臺移動應(yīng)用開發(fā)的工作量(相比原生代碼開發(fā)能減少至少50%),并且代碼結(jié)構(gòu)清晰、簡單易懂。同時React Native框架采用模塊化的結(jié)構(gòu),使應(yīng)用版本的更新迭代非常簡單。隨著它的日趨成熟,React Native必然會成為移動應(yīng)用開發(fā)的主流技術(shù)。本書由淺入深,系統(tǒng)發(fā)介紹了使用React Native框架跨平臺開發(fā)所需要用到的知識。本書每一章都專注于闡述移動應(yīng)用開發(fā)某一方面的知識,配合若干個原創(chuàng)的、精簡的例程,能讓讀者系統(tǒng)、快速地掌握該方面知識。本書的結(jié)構(gòu)是按一個有基本的編程基礎(chǔ)知識,剛學(xué)習(xí)JavaScript基本語法的讀者的最佳學(xué)習(xí)路徑來編寫的。有一定基礎(chǔ)的開發(fā)人員也可以將本書作為一本React Native開發(fā)的“字典”來使用,在開發(fā)時可以快速查找相關(guān)知識點(diǎn)的細(xì)節(jié)。希望通過本書,能將最新的React Native開發(fā)技術(shù)介紹給國內(nèi)廣大開發(fā)者,讓國內(nèi)移動應(yīng)用開發(fā)進(jìn)入一個新的時代,讓開發(fā)者用比較少的精力就能高效、美觀地完成移動應(yīng)用開發(fā)。
本書配套的GitHub文檔持續(xù)更新中,保證書中知識在zui新版本RN中可用。
★ 迄今為止,真正意義上的React Native跨平臺開發(fā)原創(chuàng)圖書。
★ 本書架構(gòu)是作者精心設(shè)計(jì)的,適合初學(xué)者入門,本次升級用 ES6語法寫。
★ 本書所有例程均是原創(chuàng)的,并且在代碼旁有注釋解說。
★ 本書中的6.5節(jié)、第11章、14.5節(jié)都是筆者精心整理調(diào)研出來的技術(shù),能讓更多的開發(fā)者享受到React Native開發(fā)的便利性。
★ 加入了React Native一年以來的新能力:
1、RN項(xiàng)目在iOS 10手機(jī)上的配置啟動過程;
2、RN項(xiàng)目斷點(diǎn)調(diào)試的使用方法;
3、手機(jī)中圖片剪切、通過網(wǎng)絡(luò)上傳;
4、RN開源社區(qū)介紹與知名開源組件介紹;
5、Modal組件與Navigator組件的配合使用;
6、網(wǎng)絡(luò)部分增加了測試服務(wù)器的搭建與介紹,讓讀者更方便掌握RN的網(wǎng)絡(luò)開發(fā);
7、推送能力、打開外部鏈接與從外部鏈接打開RN應(yīng)用能力
8、新組件:ActivityIndicator、PermissionsAndroid、Slider、Vibration;
9、原各RN組件從0.28到0.42期間新增的屬性與方法介紹。
預(yù)備知識
學(xué)習(xí)React Native開發(fā)需要基礎(chǔ)的JavaScript編程知識。我估計(jì)有一部分讀者可以在某個手機(jī)平臺使用該平臺原生語言進(jìn)行移動應(yīng)用開發(fā),但對JavaScript只是有所耳聞。如果是這種情況,不用擔(dān)心。讀者只需要隨便找一本JavaScript入門級的書籍(甚至是網(wǎng)上的教學(xué)性網(wǎng)頁),閱讀關(guān)于基礎(chǔ)語法的章節(jié),花上一天時間(包括找資料的時間)學(xué)習(xí)相關(guān)知識點(diǎn),接下來就可以通過本書學(xué)習(xí)React Native開發(fā)了。所需要的知識點(diǎn)有:
(1)JavaScript語法。包括語句、注釋、變量、數(shù)據(jù)類型、數(shù)組(注意關(guān)聯(lián)數(shù)組,Java、C++的數(shù)組中沒有這個概念)、對象的基本知識。
(2)操作運(yùn)算符。這個與Java、C++基本上是一樣的,讀者快速過一下就行。
(3)條件語句、循環(huán)語句、switch語句。這與Java、C++基本上是一樣的,讀者快速過一下就行了。
(4)函數(shù)。JavaScript中函數(shù)也是一種變量,知道了這一點(diǎn),其他與Java、C++基本上是一樣的,讀者快速過一下就行了。
(5)對象。JavaScript的對象定義、實(shí)現(xiàn)比Java、C++寬松很多。讀者得稍微適應(yīng)一下。
這些基本的知識點(diǎn),大多數(shù)與Java或者Objective-C的相關(guān)知識點(diǎn)很類似。如果讀者有基礎(chǔ),閱讀這些知識點(diǎn)最多只需要一天的時間。讀者不需要搭建JavaScript的開發(fā)環(huán)境來練習(xí)、鞏固這些知識點(diǎn),因?yàn)樵赗eact Native的開發(fā)環(huán)境中編寫代碼就可以練習(xí)這些基本的JavaScript知識點(diǎn),在React Native學(xué)習(xí)中就會鞏固這些JavaScript基本知識。
React Native在開發(fā)中用到了其他JavaScript的高級知識點(diǎn)與ES 6的一些新特性,但讀者不需要馬上去學(xué)習(xí)這些內(nèi)容。在通過本書學(xué)習(xí)React Native開發(fā)的過程中若需要使用JavaScript高級知識點(diǎn),會指出在附錄A的什么位置講解了這些高級知識點(diǎn),便于讀者快速查看。附錄A不是JavaScript知識點(diǎn)的全面講解,只是讓讀者對React Native開發(fā)中需要使用到的JavaScript知識點(diǎn)有足夠理解以進(jìn)行React Native開發(fā)。
相關(guān)下載地址
筆者希望讀者在閱讀本書時,能在理解的基礎(chǔ)上將例程代碼輸入到電腦中。輸入的過程是一個消化吸收的過程。輸入完成后,運(yùn)行代碼,并且按照提示或者針對自己有疑慮的地方進(jìn)行修改,以便深入理解各個知識點(diǎn)。
正因?yàn)槿绱耍緯懊嬲鹿?jié)中那些短小精悍的例程并沒有附在一張光盤上,或者在網(wǎng)上提供下載地址,而是需要讀者自己手動輸入電腦。
本書還有一些不需要讀者手動輸入的代碼,筆者在GitHub上提供了一個網(wǎng)址供讀者自行下載。網(wǎng)址是:https://github.com/es6rn。
本書結(jié)構(gòu)
本書討論的React Native開發(fā)特性覆蓋了2017年3月2日發(fā)布的React Native 0.42.0版本的絕大部分特性。沒有討論的部分在書末有提及。
首先需要說明的是,本書討論的知識以跨平臺(Android平臺與iOS平臺)開發(fā)為主,書中各章節(jié)的絕大部分知識點(diǎn)都是跨平臺實(shí)現(xiàn)的。只有極小部分是分平臺實(shí)現(xiàn)的,這一小部分在討論前都會說明該部分知識適用于哪個平臺。
本書的結(jié)構(gòu)是按一個有基本的編程基礎(chǔ)知識,剛學(xué)習(xí)JavaScript基本語法的讀者的最佳學(xué)習(xí)路徑來編寫的。通過一個個精簡的例程,清晰地闡述一個個基本思想。例程盡可能地精簡,并且所有例程都是筆者花了大量時間為初學(xué)者構(gòu)思而成的。
本書體例說明
代碼與代碼說明
本書例程中有大量的代碼說明,通過注釋的方式與代碼同時展示出來。例如:
var IncomingCall = React.createClass({
watcher: null, //用來記錄監(jiān)視器
startFromLeft:true, //用來判斷用戶最先按下的是最左側(cè)還是最右側(cè)
moveNeedhandle:false, //用來判斷監(jiān)測到的移動事件是否需要處理
注釋以粗體字顯示以提醒讀者注意。讀者在自己的開發(fā)環(huán)境中輸入例程時不需要輸入注釋。
React Native代碼中的JSX部分代碼不能使用這種注釋方式,本書為了統(tǒng)一注釋風(fēng)格還是使用了這種注釋方式。讀者明白了這一點(diǎn)后,在自己輸入代碼試驗(yàn)時,請將代碼中的注釋自行去掉。
注意和提示
注意和提示,是需要提醒讀者特別注意的內(nèi)容。在本書中使用帶背景色的字體顯示。
致謝
感謝我的父親闕光金老師與我的母親袁雪英老師從小到大給我的無私的愛。很抱歉無論我如何努力,也無法回報(bào)二老深恩的萬分之一。
感謝我的姐姐闕喜戎與姐夫王純,沒有你們的鼎力支持,就沒有今天的我。
感謝王汝馨伯父與曾鈺伯母,謝謝你們對我的關(guān)懷與照顧。
感謝廖建新教授、饒牧老師在我學(xué)習(xí)工作期間對我的關(guān)懷與指導(dǎo)。感謝在我7年北京郵電大學(xué)學(xué)習(xí)期間為我授業(yè)解惑的所有老師,謝謝你們!
感謝React Native開發(fā)團(tuán)隊(duì),感謝所有參與React Native開發(fā)的貢獻(xiàn)者。無數(shù)移動開發(fā)者因?yàn)槟銈儫o私的奉獻(xiàn)而受益。
感謝電子工業(yè)出版社郭立總經(jīng)理、孫學(xué)瑛編輯等為審校此書而付出的辛勤工作,以及為此書能快速出版而付出的巨大努力。你們辛苦了!
感謝在工作和生活中幫助過我的所有人,感謝你們,正是因?yàn)橛辛四銈儯庞辛吮緯拿媸馈?
關(guān)于勘誤
雖然花了很多時間和精力去核對書中的文字、代碼和圖片,但因?yàn)闀r間倉促和水平有限,書中仍難免會有一些錯誤和紕漏,如果大家發(fā)現(xiàn)什么問題,請反饋給我,相關(guān)信息可在下載本書代碼的GitHub頁面反饋。
闕喜濤,湖南省吉首市人,北京郵電大學(xué)研究生,專注智能手機(jī)應(yīng)用開發(fā)11年,任職于東信北郵信息技術(shù)有限公司,先后參與開發(fā)過中國移動POC系統(tǒng)、貴州移動一卡多號系統(tǒng)、浙江移動應(yīng)用商店系統(tǒng)開發(fā)等等。開發(fā)移動應(yīng)用下載量超過25萬。
第1章 React Native 1
1.1 React Native開發(fā)特點(diǎn) 2
1.2 React Native開發(fā)環(huán)境搭建 7
1.3 代碼編輯環(huán)境搭建 11
1.4 鍵盤使用習(xí)慣 13
1.5 React Dev Tools安裝 14
第2章 狀態(tài)機(jī)思維與狀態(tài)機(jī)變量 17
2.1 初始化項(xiàng)目 17
2.2 運(yùn)行項(xiàng)目 19
2.3 構(gòu)建登錄頁面 37
2.4 React Native代碼執(zhí)行邏輯 41
2.5 UI框架工作基本機(jī)制 41
2.6 React Native組件間通信 46
2.7 深入理解UI重新渲染的過程 47
2.8 React Native組件的成員變量 51
2.9 React Native組件的靜態(tài)變量、靜態(tài)函數(shù) 52
2.10 組件回調(diào)函數(shù)的綁定 52
第3章 頁面導(dǎo)航、彈出框及深入理解屬性 55
3.1 分離注冊組件、組件平臺自適配 55
3.2 導(dǎo)航組件、掛接注冊組件 56
3.3 掛接注冊等待組件 58
3.4 Navigator組件 61
3.5 React Native中顏色類型的值 62
3.6 BackAndroid API 63
3.7 屬性確認(rèn) 63
3.8 指定屬性默認(rèn)值 66
3.9 Alert應(yīng)用程序編程接口 66
3.10 帶導(dǎo)航欄的頁面導(dǎo)航 69
第4章 混合開發(fā)基礎(chǔ)篇 70
4.1 iOS平臺混合開發(fā) 70
4.2 Android平臺混合開發(fā) 82
第5章 flexbox布局、View、Image與可觸摸組件 100
5.1 flexbox布局 100
5.2 View組件 111
5.3 Image組件 125
5.4 可觸摸組件 135
5.5 使用導(dǎo)航欄的導(dǎo)航框架 139
第6章 Text、TextInput等相關(guān)知識 145
6.1 Text組件 145
6.2 Text組件在兩個平臺上的不同表現(xiàn) 155
6.3 TextInput組件 158
6.4 TextInput組件在兩個平臺上的不同表現(xiàn) 161
6.5 TextInput組件的生命周期 165
6.6 Keyboard API、軟鍵盤與鍵盤事件 168
6.7 組件的引用 171
6.8 跨平臺狀態(tài)欄組件 175
6.9 高度自增長的擴(kuò)展TextInput組件 177
6.10 訪問操作系統(tǒng)剪貼板 179
第7章 組件生命周期、數(shù)據(jù)存儲及React Native應(yīng)用實(shí)現(xiàn)步驟 182
7.1 組件生命周期 182
7.2 讀取JSON文件 185
7.3 數(shù)據(jù)持久化操作 186
7.4 數(shù)據(jù)表操作 193
7.5 React Native應(yīng)用實(shí)現(xiàn)步驟、日記例程(上) 193
第8章 ScrollView和ListView 218
8.1 ScrollView組件 218
8.2 ListView組件 224
8.3 簡單的列表 226
8.4 帶分段標(biāo)志的列表 237
8.5 日記例程(下)總結(jié) 241
第9章 等待提示、進(jìn)度條和Switch 242
9.1 ActivityIndicator組件 242
9.2 iOS進(jìn)度條組件 243
9.3 Android平臺進(jìn)度條組件 246
9.4 Switch組件 246
第10章 導(dǎo)航組件與Modal 249
10.1 導(dǎo)航組件的屬性 249
10.2 導(dǎo)航器 250
10.3 NavigationBar 251
10.4 導(dǎo)航例程 252
10.5 Modal組件 257
10.6 Modal組件與Navigator組件的配合 258
10.7 Modal組件例程 258
第11章 手勢識別 263
11.1 PanResponder API 263
11.2 監(jiān)視器 263
11.3 監(jiān)視事件的生命周期 265
11.4 手勢識別處理例程 270
第12章 網(wǎng)絡(luò) 282
12.1 獲取網(wǎng)絡(luò)狀態(tài) 282
12.2 搭建調(diào)試用HTTP、HTTPS服務(wù)器 284
12.3 通過HTTP、HTTPS與網(wǎng)絡(luò)側(cè)交換數(shù)據(jù) 286
12.4 在React Native開發(fā)中使用AJAX技術(shù) 291
12.5 WebSocket 292
12.6 推送 294
12.7 Linking API 296
第13章 網(wǎng)頁瀏覽器、音視頻媒體播放 299
13.1 WebView組件樣式設(shè)置 299
13.2 WebView組件其他屬性 299
13.3 網(wǎng)頁瀏覽器使用例程 301
13.4 音視頻媒體播放 306
第14章 應(yīng)用權(quán)限與圖庫操作 307
14.1 應(yīng)用權(quán)限 307
14.2 React Native開發(fā)中iOS平臺鏈接庫的使用 310
14.3 獲取手機(jī)中所有的圖片信息 312
14.4 圖片信息詳解 314
14.5 顯示從CameraRoll API得到的圖片 315
14.6 為用戶提供圖片選擇界面 316
14.7 圖片的保存與讀取顯示 318
14.8 將圖片通過POST消息上傳 320
14.9 裁剪圖片 323
第15章 選擇器、位置相關(guān)和應(yīng)用狀態(tài) 325
15.1 日期、時間選擇器 325
15.2 Picker組件 330
15.3 PickerIOS 334
15.4 Slider組件 336
15.5 AppState API 338
15.6 獲取地理位置 339
15.7 Vibration API 340
15.8 地圖功能 342
第16章 RN開源組件 343
16.1 微軟熱更新開源平臺——CodePush 343
16.2 Google統(tǒng)計(jì)平臺——Google Analytics 348
16.3 極光推送組件 352
16.4 數(shù)據(jù)存儲 352
16.5 圖像處理 353
16.6 微信開發(fā)組件 354
16.7 支付寶支付組件 354
16.8 獲取設(shè)備信息 354
16.9 國際化處理 355
第17章 混合開發(fā)高級篇 356
17.1 使用Objective-C語言創(chuàng)建私有的React Native組件 356
17.2 使用Swift語言創(chuàng)建私有的React Native組件 363
17.3 使用Android SDK創(chuàng)建私有的React Native組件 371
第18章 項(xiàng)目配置、生成發(fā)布版本安裝包及其他 378
18.1 調(diào)試環(huán)境與正式運(yùn)行環(huán)境的不同 378
18.2 iOS平臺項(xiàng)目配置 379
18.3 iOS平臺應(yīng)用發(fā)布 383
18.4 Android平臺項(xiàng)目配置 383
18.5 Android平臺應(yīng)用生成發(fā)布版本安裝包 385
18.6 其他組件與API 386
附錄A ECMAScript 2015語法參考 388
附錄B ES 5語法 395