本文主要講解了如何運作 React Native 官方控件示例 App，包含了一些 React Native 的基礎知識以及相關環境的配置。
React Native 以及示例 App 簡介
關于 React Native 的簡要介紹。
{% blockquote http://facebook.github.io/react-native/ %}
React Native 結合了 Web 應用和 Native 應用的優勢，可以使用 JavaScript 來開發 iOS 和 Android 原生應用。在 JavaScript 中用 React 抽象作業系統原生的 UI 元件，代替 DOM 元素來渲染等。
React Native 使你能夠使用基于 JavaScript 和 React 一緻的開發體驗在本地平台上建構世界一流的應用程式體驗。React Native 把重點放在所有開發人員關心的平台的開發效率上——開發者隻需學習一種語言就能輕易為任何平台高效地編寫代碼。Facebook 在多個應用程式産品中使用了 React Native，并将繼續為 React Native 投資。
{% endblockquote %}
在官方的
Getting Started文檔中，講解了所有元件、API 以及不同平台下的使用，但是官方的文檔和示例代碼是不帶任何一個截圖的，了解起來比較困難，特别是對于初學者。
其實在 React Native 的
GitHub中已經提供了示例 App 的所有代碼，我們隻要下載下傳後編譯運作即可。
對應的代碼路徑如下：
示例 App 運作配置的注意點
依賴包安裝
因為 React Native 的相關元件也是依賴于 npm 的包管理，是以在項目下載下傳下來後需要初始化依賴包，方法是在項目檔案根目錄運作
npm install
初始化安裝即可。注意是 GitHub 擷取下來的根目錄，因為
package.json
在此目錄下，相關知識請查閱 npm 的使用。
選擇相應的 js bundle 加載方式
在 iOS 項目的 AppDelegate.m 檔案中，注意下面這段 js bundle 的加載方式的選擇。
{% codeblock lang:objc%}
/**
- Loading JavaScript code - uncomment the one you want.
- OPTION 1
- Load from development server. Start the server from the repository root:
- $ npm start
- To run on device, change
localhost
- (you can get this by typing
ifconfig
-
inet
en0:
-
on the same Wi-Fi network.
*/
//sourceURL = [NSURL URLWithString:@"http://localhost:8081/Examples/UIExplorer/UIExplorerApp.ios.bundle?platform=ios&dev=true"];
- OPTION 2
- Load from pre-bundled file on disk. To re-generate the static bundle,
cd
- to your Xcode project folder and run
- $ curl 'http://localhost:8081/Examples/UIExplorer/UIExplorerApp.ios.bundle?platform=ios' -o main.jsbundle
- then add the
main.jsbundle
sourceURL = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
{% endcodeblock %}
- 一種你可以選擇伺服器路徑的模式，即在運作的時候使用
npm start
- 另一種方式是編譯生成 js 後直接打包進 App 裡，脫離對服務端的請求，針對此示例 App ，推薦使用這種方法，可以裝在自己的真機上随時随地打開研究。
運作效果
運作起來後的效果如圖所示。
結語
React Native 從 2015 年開始熱起來，2016 年必将是其更加火熱的一年，開發易學、跨平台，非常好的産品，示例程式 App 也基本滿足了我們學習基礎元件和 API 的需求，是以此文幫助您搭建好學習此技術的一個重要的環境，有任何問題歡迎留言指教、交流。
作者：
Parry出處：
http://www.cnblogs.com/parry/本文版權歸作者和部落格園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接配接，否則保留追究法律責任的權利。