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