2. 程式人生 > >《React Native 精解與實戰》書籍連載「React Native 原始碼學習方法及其他資源」

《React Native 精解與實戰》書籍連載「React Native 原始碼學習方法及其他資源」

阿新 • • 發佈：2018-12-14

此係列文章將整合我的 React 視訊教程與 React Native 書籍中的精華部分，給大家介紹 React Native 原始碼學習方法及其他資源。

最後的章節給大家介紹 React Native 原始碼的查閱方法，以便你進行更加高階的開發與研究時參閱，並分享了開發過程中可能遇到的眾多問題的解決方案，以及與 React Native 開發相關、本書相關的一些線上資源。

15.6 React Native 原始碼剖析

我們在學習了 React Native 開發的方方面面之後，我們再次回到 React Native 的本質，給大家簡要介紹 React Native 原始碼的學習方法，對 React Native 原始碼的整體框架做一個簡單介紹，後續如果大家想深入閱讀 React Native 框架的原始碼，希望這部分對你有所幫助，並且能從原始碼中學習到複雜框架的設計思想，希望大家也能“造出複雜的輪子”。

截圖 圖 A-1 React Native 原始碼結構

  • 根目錄中主要包含了專案的一些配置檔案和一些描述性文件；
  • 初始化專案的 React Native CLI 定義在 react-native-cli 資料夾下；
  • RNTester 資料夾包含了 React Native 專案的單元測試用例以及元件、API 的使用示例程式碼，是一個學習 React Native 元件與 API 使用方法的寶庫，這個在之前的章節有過介紹；
  • React 資料夾是 iOS 原生平臺的專案資料夾，用於與 React Native 的 JavaScript 程式碼通訊；
  • ReactAndroid 資料夾是 Android 原生平臺的專案資料夾，用於與 React Native 的 JavaScript 程式碼通訊；
  • babel-preset 資料夾是 React Native 專案的 Babel 預配置；
  • Libraries 資料夾是 React Native 原始碼的核心，所有的 React Native 元件與 API 的實現都在此資料夾中。

接下來我們就隨便找一個元件來看看 React Native 是如何進行實現的，假設我們就來看看 Alert 元件的實現，其實通過我們在 React Native 與原生平臺混合開發章節的學習，我們已經大概知道了 React Native 是如何來實現的。

我們先來看 Alert 元件 JavaScript 端的實現，Alert 元件包含的檔案如圖 A-2 所示。

截圖 圖 A-2 Alert 元件原始碼結構

1.  ......  
2.  class Alert {  
3.    
4.    /** 
5.     * Launches an alert dialog with the specified title and message. 
6.     * 
7.     * See http://facebook.github.io/react-native/docs/alert.html#alert 
8.     */  
9.    static alert(  
10.     title: ?string,  
11.     message?: ?string,  
12.     buttons?: Buttons,  
13.     options?: Options,  
14.     type?: AlertType,  
15.   ): void {  
16.     if (Platform.OS === 'ios') {  
17.       if (typeof type !== 'undefined') {  
18.         console.warn('Alert.alert() with a 5th "type" parameter is deprecated and will be removed. Use AlertIOS.prompt() instead.');  
19.         AlertIOS.alert(title, message, buttons, type);  
20.         return;  
21.       }  
22.       AlertIOS.alert(title, message, buttons);  
23.     } else if (Platform.OS === 'android') {  
24.       AlertAndroid.alert(title, message, buttons, options);  
25.     }  
26.   }  
27. }  
28.   
29. /** 
30.  * Wrapper around the Android native module. 
31.  */  
32. class AlertAndroid {  
33.   
34.   static alert(  
35.     title: ?string,  
36.     message?: ?string,  
37.     buttons?: Buttons,  
38.     options?: Options,  
39.   ): void {  
40.     var config = {  
41.       title: title || '',  
42.       message: message || '',  
43.     };  
44.   
45.     if (options) {  
46.       config = {...config, cancelable: options.cancelable};  
47.     }  
48.     // At most three buttons (neutral, negative, positive). Ignore rest.  
49.     // The text 'OK' should be probably localized. iOS Alert does that in native.  
50.     var validButtons: Buttons = buttons ? buttons.slice(0, 3) : [{text: 'OK'}];  
51.     var buttonPositive = validButtons.pop();  
52.     var buttonNegative = validButtons.pop();  
53.     var buttonNeutral = validButtons.pop();  
54.     if (buttonNeutral) {  
55.       config = {...config, buttonNeutral: buttonNeutral.text || '' };  
56.     }  
57.     if (buttonNegative) {  
58.       config = {...config, buttonNegative: buttonNegative.text || '' };  
59.     }  
60.     if (buttonPositive) {  
61.       config = {...config, buttonPositive: buttonPositive.text || '' };  
62.     }  
63.     NativeModules.DialogManagerAndroid.showAlert(  
64.       config,  
65.       (errorMessage) => console.warn(errorMessage),  
66.       (action, buttonKey) => {  
67.         if (action === NativeModules.DialogManagerAndroid.buttonClicked) {  
68.           if (buttonKey === NativeModules.DialogManagerAndroid.buttonNeutral) {  
69.             buttonNeutral.onPress && buttonNeutral.onPress();  
70.           } else if (buttonKey === NativeModules.DialogManagerAndroid.buttonNegative) {  
71.             buttonNegative.onPress && buttonNegative.onPress();  
72.           } else if (buttonKey === NativeModules.DialogManagerAndroid.buttonPositive) {  
73.             buttonPositive.onPress && buttonPositive.onPress();  
74.           }  
75.         } else if (action === NativeModules.DialogManagerAndroid.dismissed) {  
76.           options && options.onDismiss && options.onDismiss();  
77.         }  
78.       }  
79.     );  
80.   }  
81. }  
82.   
83. module.exports = Alert;  
84. ......

此段程式碼省略了頭部的相關內容，在程式碼的第 16 行通過 Platform 變數判斷當前所執行的平臺，如果是 iOS 平臺，那麼就呼叫 AlertIOS 檔案中定義的程式碼，如果是 Android 平臺就呼叫程式碼第 32 行定義的 AlertAndroid 用於實現對 Android 原生平臺 Alert 的呼叫，注意程式碼的第 63 行，是不是和我們實戰 React Native 與 Android 平臺混合開發的實現一樣？所以 React Native 的所有元件與 API 基本都是通過此種方法進行了封裝後提供給了開發者，所以我們可以說 iOS 原生平臺與 Android 原生平臺具備的功能都可以通過封裝後在 React Native 框架中使用。

86. ......  
87.  @ReactMethod  
88.   public void showAlert(  
89.       ReadableMap options,  
90.       Callback errorCallback,  
91.       final Callback actionCallback) {  
92.     final FragmentManagerHelper fragmentManagerHelper = getFragmentManagerHelper();  
93.     if (fragmentManagerHelper == null) {  
94.       errorCallback.invoke("Tried to show an alert while not attached to an Activity");  
95.       return;  
96.     }  
97.   
98.     final Bundle args = new Bundle();  
99.     if (options.hasKey(KEY_TITLE)) {  
100.          args.putString(AlertFragment.ARG_TITLE, options.getString(KEY_TITLE));  
101.        }  
102.        if (options.hasKey(KEY_MESSAGE)) {  
103.          args.putString(AlertFragment.ARG_MESSAGE, options.getString(KEY_MESSAGE));  
104.        }  
105.        if (options.hasKey(KEY_BUTTON_POSITIVE)) {  
106.          args.putString(AlertFragment.ARG_BUTTON_POSITIVE, options.getString(KEY_BUTTON_POSITIVE));  
107.        }  
108.        if (options.hasKey(KEY_BUTTON_NEGATIVE)) {  
109.          args.putString(AlertFragment.ARG_BUTTON_NEGATIVE, options.getString(KEY_BUTTON_NEGATIVE));  
110.        }  
111.        if (options.hasKey(KEY_BUTTON_NEUTRAL)) {  
112.          args.putString(AlertFragment.ARG_BUTTON_NEUTRAL, options.getString(KEY_BUTTON_NEUTRAL));  
113.        }  
114.        if (options.hasKey(KEY_ITEMS)) {  
115.          ReadableArray items = options.getArray(KEY_ITEMS);  
116.          CharSequence[] itemsArray = new CharSequence[items.size()];  
117.          for (int i = 0; i < items.size(); i ++) {  
118.            itemsArray[i] = items.getString(i);  
119.          }  
120.          args.putCharSequenceArray(AlertFragment.ARG_ITEMS, itemsArray);  
121.        }  
122.        if (options.hasKey(KEY_CANCELABLE)) {  
123.          args.putBoolean(KEY_CANCELABLE, options.getBoolean(KEY_CANCELABLE));  
124.        }  
125.      
126.        UiThreadUtil.runOnUiThread(new Runnable() {  
127.          @Override  
128.          public void run() {  
129.            fragmentManagerHelper.showNewAlert(mIsInForeground, args, actionCallback);  
130.          }  
131.        });  
132.      
133.      }  
134.    ......

我們可以通過如上程式碼看到整個 Android 端的 showAlert 實現完全就是我們平時進行 Android 原生開發的程式碼實現，而通過 React Native 的封裝之後，可以輕鬆讓開發者在前端通過 JavaScript 的程式碼呼叫原生平臺的方法，還可以直接適配兩個平臺，這樣的框架設計的確有魅力，原始碼也值得好好閱讀。

以上主要是給大家把 React Native 原始碼的基本結構告訴大家，空閒時間大家可以多去閱讀 React Native 的實現原始碼，希望能對你 React Native 的學習再多一些幫助。

關於原始碼學習過程中的任何問題都可以在本書的線上資源站點找到我的聯絡方式和我交流。

15.7 難題解決方法與 Issues 重要作用

任何開發語言的學習，即使相關的書籍講解得再詳細，也不能完全覆蓋你在開發過程中遇到的種種問題，所以我們需要掌握一些查詢疑難問題的基本方案。

關於大家在學習本書進行 React Native 開發的過程中，有幾個建議遵循的原則與查詢問題的方案供大家參考。

1. 不要糾結於 React Native 的版本問題

很多時候我們在學習時糾結於 React Native 版本更新後，自己已學習的知識是否會落後，從而頻繁地在安裝最新版本的 React Native 框架、以及解決新版本與老的學習程式碼衝突上浪費太多的時間。其實很多的前端框架的更新都比較激進，React 基本實現了兩週版本一更新，而每次的版本升級肯定會導致和你既有的專案程式碼有稍許衝突的地方，而如果你花大量地時間去解決這些衝突沒有太大的意義。

所以一般的建議是你固定一個版本的 React Native 進行學習，因為版本的更新一般都很小，你只需要專注於框架的使用學習，儘快通過程式碼實戰掌握框架的基本使用，後期可以認真研究框架的底層實現原理，而後期的版本更新基本都不會離開你已掌握的框架知識，更不會與你理解的實現原理有太大出入。

2. 單個平臺進行問題定位

React Native 的開發因為涉及到 iOS 平臺與 Android 平臺的適配，有時一個問題可能影響到了兩個平臺的表現，這時應該逐個平臺突破，而不是兩個平臺來一起除錯，反而會造成程式碼的邏輯混亂，如果需要在程式碼上強制分離邏輯除錯，可以通過 Platform 變數判斷當前是執行在哪個平臺，進而編寫特定的平臺程式碼進行分離除錯。

3. 善用官方的 Issues

React Native 因為原始碼就釋出在 GitHub 上，所以你可以直接在 GitHub 專案頁面上查詢開發過程中遇到的問題，在 Issues 頁面中已包含了近萬個問題，基本上你使用過程中遇到的問題肯定有別人遇到過，所以要學會直接在 Issues 中查詢問題的原因以及解決方案，實在找不到解決方案你還可以向 React Native 專案提交 Issue，並可以獲得 React Native 開發團隊的回覆，我想應該沒有人比 React Native 開發團隊的人更瞭解 React Native 了吧，不過在提問前最好自己多動手查閱一遍所有的 Issues 是否已包含了你遇到的問題了。

截圖 圖 A-3 React Native 官方 Issues 頁面

15.8 書籍相關資源列表

  1. 本書配套原始碼的 GitHub 地址 包含書籍中所有標註的完整程式碼、程式碼片段等，所有的章節程式碼都進行了單獨資料夾存放，方便查閱，後續關於本書的相關更新也在此 GitHub 中更新。 地址：https://github.com/ParryQiu/ReactNative-Book-Demo

  2. React GitHub 地址：https://github.com/facebook/react/

  3. React Native 官網 地址：https://facebook.github.io/react-native/

  4. React Native GitHub 地址：https://github.com/facebook/react-native

  5. awesome-react-native GitHub 地址：https://github.com/jondot/awesome-react-native

  6. 深入理解 React JS 中的 setState 地址：http://blog.parryqiu.com/2017/12/19/react_set_state_asynchronously/

  7. 從原始碼的角度再看 React JS 中的 setState 地址：http://blog.parryqiu.com/2017/12/29/react-state-in-sourcecode/

  8. 從原始碼的角度看 React JS 中批量更新 State 的策略（上） 地址：http://blog.parryqiu.com/2018/01/04/2018-01-04/

  9. 從原始碼的角度看 React JS 中批量更新 State 的策略（下） 地址：http://blog.parryqiu.com/2018/01/08/2018-01-08/

  10. Node.js 官網 地址：https://nodejs.org

  11. npm 官網 地址：https://www.npmjs.com/

  12. Node.js 下載頁面 地址：https://nodejs.org/en/download/

  13. Homebrew 官網 地址：https://brew.sh/

  14. 官方 UI 示例 App 地址：https://github.com/facebook/react-native/tree/master/RNTester

  15. react-native-elements 地址：https://github.com/react-native-training/react-native-elements

  16. react-native-tab-navigator 地址：https://github.com/happypancake/react-native-tab-navigator

  17. react-native-navigation 地址：https://github.com/wix/react-native-navigation

  18. react-native-keychain 地址：https://github.com/oblador/react-native-keychain

  19. react-native-sensitive-info 地址：https://github.com/mCodex/react-native-sensitive-info

  20. react-native-image-picker 地址：https://github.com/react-community/react-native-image-picker

  21. Fetch API 文件 地址：https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

  22. Awesome React Native 地址：https://github.com/jondot/awesome-react-native

  23. react-native-open-share 地址：https://github.com/ParryQiu/react-native-open-share

  24. 新浪微博開放平臺 地址：http://open.weibo.com/

  25. 微信開放平臺 地址：https://open.weixin.qq.com/

  26. QQ 開放平臺 地址：http://open.qq.com/

  27. React-Virgin 地址：https://github.com/Trixieapp/react-virgin

  28. react-native-pathjs-charts 地址：https://github.com/capitalone/react-native-pathjs-charts

  29. react-native-gifted-listview 地址：https://github.com/FaridSafi/react-native-gifted-listview

  30. react-native-vector-icons 地址：https://github.com/oblador/react-native-vector-icons

  31. React Native metro 地址：https://github.com/facebook/metro

  32. Genymotion 地址：https://www.genymotion.com/

  33. 極光推送官網 地址：https://www.jiguang.cn/

  34. jpush-react-native 地址：https://github.com/jpush/jpush-react-native

  35. 極光推送 iOS 證書設定嚮導 地址：https://docs.jiguang.cn/jpush/client/iOS/ios_cer_guide/

  36. Ape Tools 地址：http://apetools.webprofusion.com/tools/imagegorilla

  37. App 圖示生成工具 https://makeappicon.com/ http://ios.hvims.com/ https://romannurik.github.io/AndroidAssetStudio/

  38. react-native-code-push 地址：https://github.com/Microsoft/react-native-code-push

  39. React Native Issues 地址：https://github.com/facebook/react-native/issues

  40. 以上的所有連結彙總頁面 如果你覺得需要查閱以上的連結，手動在瀏覽器中輸入太麻煩，你可以直接訪問本書的線上所有連結彙總站點，在此站點中你可以看到以上的所有連結以及連結說明，直接點選即可訪問、查閱，希望能幫助大家提高學習效率。 地址：http://rn.parryqiu.com

相關推薦

《React Native 精解與實戰》書籍連載「React Native 原始碼學習方法及其他資源」

此係列文章將整合我的 React 視訊教程與 React Native 書籍中的精華部分，給大家介紹 React Native 原始碼學習方法及其他資源。 最後的章節給大家介紹 React Native 原始碼的查閱方法，以便你進行更加高階的開發與研究時參閱，並分享了開發過程中可能遇到的眾多問題的解決方案，以

《React Native 精解與實戰》書籍連載「Android 平臺與 React Native 混合開發」

此文是我的出版書籍《React Native 精解與實戰》連載分享，此書由機械工業出版社出版，書中詳解了 React Native 框架底層原理、React Native 元件佈局、元件與 API 的介紹與程式碼實戰，以及 React Native 與 iOS、Android 平臺的混合開發底層原理講解與程式

Linux centos關機與重啟命令詳解與實戰

包含 動作 /var/ proc 電源 sign 沒有 時間 數據丟失 Linux centos重啟命令： 　　1、reboot 　　2、shutdown -r now 立刻重啟(root用戶使用) 　　3、shutdown -r 10 過10分鐘自動重啟(root用戶使

5. 寬字符註入詳解與實戰

構造 詳解 這就是 取數 報錯 query 服務器 html 連接mysql 寬字節註入源於程序員設置MySQL連接時的錯誤配置,如下： set character_set_client=gbk 這樣的配置會引發編碼轉換從而導致繞過某些防護實現註入漏洞。具體分析一下原理

FFmpeg音視頻核心技術精講與實戰

zsh 事件處理 第一個 媒體 第6章 學習 行業 接口 建議 第1章 課程導學與準備工作全民娛樂時代，需要音視頻等多媒體產品層出不窮，但會處理音視頻數據的工程師卻極度匱乏，進入音視頻開發領域正當時，這門課程就是為這樣的你而生。來吧！加入我們，成就更好的自己。 1-1 課前

最新FFmpeg音視訊核心技術精講與實戰分享

第1章 課程導學與準備工作全民娛樂時代，需要音視訊等多媒體產品層出不窮，但會處理音視訊資料的工程師卻極度匱乏，進入音視訊開發領域正當時，這門課程就是為這樣的你而生。來吧！加入我們，成就更好的自己。1-1 課前必讀（不看會錯過一個億）1-2 課程導學1-3 音視訊的應用範圍與播放器架構講解（選看

FFmpeg音視訊核心技術精講與實戰完整版

第1章 課程導學與準備工作全民娛樂時代，需要音視訊等多媒體產品層出不窮，但會處理音視訊資料的工程師卻極度匱乏，進入音視訊開發領域正當時，這門課程就是為這樣的你而生。來吧！加入我們，成就更好的自己。1-1 課前必讀（不看會錯過一個億）1-2 課程導學1-3 音視訊的應用範圍與播放器架構講解（選看

最新FFmpeg音視訊核心技術精講與實戰完整版

第1章 課程導學與準備工作全民娛樂時代，需要音視訊等多媒體產品層出不窮，但會處理音視訊資料的工程師卻極度匱乏，進入音視訊開發領域正當時，這門課程就是為這樣的你而生。來吧！加入我們，成就更好的自己。1-1 課前必讀（不看會錯過一個億）1-2 課程導學1-3 音視訊的應用範圍與播放器架構講解（選看

某課網FFmpeg音視訊核心技術精講與實戰

第1章 課程導學與準備工作 本章首先介紹音視訊行業的未來前景，然後介紹本課程的具體安排，適合人群以及學習建議，然後會給大家介紹下目前音視訊的應用場景，然後為大家提前講解下播放器架構和音視訊渲染流程，讓大家有個印象，後面在具體章節也會具體的深入的講解。最後會帶大家下載，編譯

列車排程(Train)習題精解與注意事項

題目：  描述 某列車排程站的鐵道聯接結構如Figure 1所示。 其中，A為入口，B為出口，S為中轉盲端。所有鐵道均為單軌單向式：列車行駛的方向只能是從A到S，再從S到B；另外，不允許超車。因為車廂可在S中駐留，所以它們從B端駛出的次序，可能與從A端駛入的次序不同。不過

某課無加密FFmpeg音視訊核心技術精講與實戰

第1章 課程導學與準備工作 本章首先介紹音視訊行業的未來前景，然後介紹本課程的具體安排，適合人群以及學習建議，然後會給大家介紹下目前音視訊的應用場景，然後為大家提前講解下播放器架構和音視訊渲染流程，讓大家有個印象，後面在具體章節也會具體的深入的講解。最後會帶大家下載，編譯

FFmpeg音視訊核心技術精講與實戰目前最全

第1章 課程導學與準備工作 本章首先介紹音視訊行業的未來前景，然後介紹本課程的具體安排，適合人群以及學習建議，然後會給大家介紹下目前音視訊的應用場景，然後為大家提前講解下播放器架構和音視訊渲染流程，讓大家有個印象，後面在具體章節也會具體的深入的講解。最後會帶大家下載，編譯

FFmpeg音視訊核心技術精講與實戰目前最新

第1章 課程導學與準備工作 本章首先介紹音視訊行業的未來前景，然後介紹本課程的具體安排，適合人群以及學習建議，然後會給大家介紹下目前音視訊的應用場景，然後為大家提前講解下播放器架構和音視訊渲染流程，讓大家有個印象，後面在具體章節也會具體的深入的講解。最後會帶大家下載，編譯

2018FFmpeg音視訊核心技術精講與實戰（已完結）

第1章 課程導學與準備工作全民娛樂時代，需要音視訊等多媒體產品層出不窮，但會處理音視訊資料的工程師卻極度匱乏，進入音視訊開發領域正當時，這門課程就是為這樣的你而生。來吧！加入我們，成就更好的自己。1-1 課前必讀（不看會錯過一個億）1-2 課程導學1-3 音視訊的應用範圍與播放器架構講解（選看

FFmpeg音視訊核心技術精講與實戰（最新無加密）

第1章 課程導學與準備工作 本章首先介紹音視訊行業的未來前景，然後介紹本課程的具體安排，適合人群以及學習建議，然後會給大家介紹下目前音視訊的應用場景，然後為大家提前講解下播放器架構和音視訊渲染流程，讓大家有個印象，後面在具體章節也會具體的深入的講解。最後會帶大家下載，編譯

某網FFmpeg音視訊核心技術精講與實戰無加密

第1章 課程導學與準備工作 本章首先介紹音視訊行業的未來前景，然後介紹本課程的具體安排，適合人群以及學習建議，然後會給大家介紹下目前音視訊的應用場景，然後為大家提前講解下播放器架構和音視訊渲染流程，讓大家有個印象，後面在具體章節也會具體的深入的講解。最後會帶大家下載，編譯

FFmpeg音視訊核心技術精講與實戰(同步更新)

第1章 課程導學與準備工作 本章首先介紹音視訊行業的未來前景，然後介紹本課程的具體安排，適合人群以及學習建議，然後會給大家介紹下目前音視訊的應用場景，然後為大家提前講解下播放器架構和音視訊渲染流程，讓大家有個印象，後面在具體章節也會具體的深入的講解。最後會帶大家下載，編譯

某課FFmpeg音視訊核心技術精講與實戰

第1章 課程導學與準備工作 本章首先介紹音視訊行業的未來前景，然後介紹本課程的具體安排，適合人群以及學習建議，然後會給大家介紹下目前音視訊的應用場景，然後為大家提前講解下播放器架構和音視訊渲染流程，讓大家有個印象，後面在具體章節也會具體的深入的講解。最後會帶大家下載，編譯

FFmpeg音視訊核心技術精講與實戰（資源最新）

第1章 課程導學與準備工作 本章首先介紹音視訊行業的未來前景，然後介紹本課程的具體安排，適合人群以及學習建議，然後會給大家介紹下目前音視訊的應用場景，然後為大家提前講解下播放器架構和音視訊渲染流程，讓大家有個印象，後面在具體章節也會具體的深入的講解。最後會帶大家下載，編譯

最新FFmpeg音視訊核心技術精講與實戰

第1章 課程導學與準備工作全民娛樂時代，需要音視訊等多媒體產品層出不窮，但會處理音視訊資料的工程師卻極度匱乏，進入音視訊開發領域正當時，這門課程就是為這樣的你而生。來吧！加入我們，成就更好的自己。1-1 課前必讀（不看會錯過一個億）1-2 課程導學1-3 音視訊的應用範圍