「React Native 教程」如何運行官方控件示例 App
來自： http://blog.parryqiu.com/2016/02/19/react_native_course_how_to_run_official_example_app/
本文主要講解了如何運行 React Native 官方控件示例 App，包含了一些 React Native 的基礎知識以及相關環境的配置。
React Native 以及示例 App 簡介
React Native 結合了 Web 應用和 Native 應用的優勢，可以使用 JavaScript 來開發 iOS 和 Android 原生應用。在 JavaScript 中用 React 抽象操作系統原生的 UI 組件，代替 DOM 元素來渲染等。React Native 使你能夠使用基于 JavaScript 和 React 一致的開發體驗在本地平臺上構建世界一流的應用程序體驗。React Native 把重點放在所有開發人員關心的平臺的開發效率上——開發者只需學習一種語言就能輕易為任何平臺高效地編寫代碼。非死book 在多個應用程序產品中使用了 React Native，并將繼續為 React Native 投資。
在官方的 Getting Started 文檔中，講解了所有組件、API 以及不同平臺下的使用，但是官方的文檔和示例代碼是不帶任何一個截圖的，理解起來比較困難，特別是對于初學者。
其實在 React Native 的 GitHub 中已經提供了示例 App 的所有代碼，我們只要下載后編譯運行即可。
對應的代碼路徑如下：
示例 App 運行配置的注意點
依賴包安裝
因為 React Native 的相關組件也是依賴于 npm 的包管理，所以在項目下載下來后需要初始化依賴包，方法是在項目文件根目錄運行 npm install 初始化安裝即可。注意是 GitHub 獲取下來的根目錄，因為 package.json 在此目錄下，相關知識請查閱 npm 的使用。
選擇相應的 js bundle 加載方式
在 iOS 項目的 AppDelegate.m 文件中，注意下面這段 js bundle 的加載方式的選擇。
/** * 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` to the IP address of your computer * (you can get this by typing `ifconfig` into the terminal and selecting the * `inet` value under `en0:`) and make sure your computer and iOS device are * 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` file to your project and uncomment this line: */ sourceURL = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
</div>
- 一種你可以選擇服務器路徑的模式，即在運行的時候使用 npm start 生成一個服務端供請求 js bundle；
- 另一種方式是編譯生成 js 后直接打包進 App 里，脫離對服務端的請求，針對此示例 App ，推薦使用這種方法，可以裝在自己的真機上隨時隨地打開研究。
運行效果
運行起來后的效果如圖所示。
結語
React Native 從 2015 年開始熱起來，2016 年必將是其更加火熱的一年，開發易學、跨平臺，非常好的產品，示例程序 App 也基本滿足了我們學習基礎組件和 API 的需求，所以此文幫助您搭建好學習此技術的一個重要的環境，有任何問題歡迎留言指教、交流。
– EOF –
轉載須以超鏈接形式標明文章原始出處和作者信息