ReactNavtive架構教程（1），

ReactNavtive架構教程（1），

原文：http://www.raywenderlich.com/99473/introducing-react-native-building-apps-javascript

 注意：所有圖片放在了百度相簿空間，如果你看不到圖片，請複製圖片URL，然後粘貼到地址欄中進行查看。

開始

ReactNative 架構可以在GitHub 獲得，你可以使用git clone命令或者直接下載zip包來擷取它。

ReactNative 使用了 Node.js，如果你的機器上沒有安裝Node.js，請先安裝它。 首先需要安裝 Homebrew。然後用brew命令來安裝Node.js:

brew install node

然後安裝 watchman（用來監視檔案改動情況）:

brew install watchman

然後安裝React Native 的CLI:

npm install -g react-native-cli

npm將立即下載並安裝CLI。npm是一個類似CocoPods或Carthage工具。

定位到要開發React Native App的檔案夾，使用命令：

react-native init PropertyFinder

這將建立一個空的React Native項目。

在React Native專案檔夾中，node_modules檔案夾將包含React Native 架構檔案。此外還有一個 index.ios.js 檔案，這也是CLI建立的。

還有一個Xcode專案檔及一個iOS檔案夾，後者會有一些iOS代碼用於引導ReactNavtive App。

開啟Xcode專案檔，build&run。模擬器啟動並顯示如下介面：

與此同時Xcode還會開啟一個終端視窗，並顯示如下資訊：

===============================================================  |  Running packager on port 8081.        |  Keep this packager running while developing on any JS          |  projects. Feel free to close this tab and run your own       |  packager instance if you prefer.                               |                                                               |     https://github.com/facebook/react-native                  |                                                                ===============================================================   Looking for JS files in    /Users/colineberhardt/Temp/TestProject   React packager ready.

這是React Navtive Packager，它在node容器中運行。

千萬不要關閉這個視窗，因為這會導致Xcode終止App並重新運行它。

注意: 在開始接觸具體的代碼之前（在本教程中，主要是js代碼），我們將推薦 Sublime Text這個文本編輯工具，因為Xcode並不適合用於編寫js代碼的。當然，你也可以使用 atom, brackets 等其他輕量級的工具來替代。

Hello React Native

用你喜歡的文字編輯器（例如Sublime Text）開啟index.ios.js ，刪除所有內容。然後加入以下語句：

'use strict';

這將開啟嚴謹模式，這會改進錯誤的處理並禁用某些js文法特性，這將讓JavaScript表現得更好。

注意: 關於嚴謹模式，讀者可以參考 Jon Resig的文章：“ECMAScript5 Strict Mode, JSON, and More”。

然後加入這一句：

var React = require('react-native');

這將載入 react-native 模組，並將其儲存到React對象。React Native 使用和Node.js 一樣的 require 函數來載入模組，類似於Swift中的import語句。

注意: 關於JavaScript 模組的概念，請參考 AddyOsmani的這篇文章。

然後敲入如下語句：

var styles = React.StyleSheet.create({   text: {     color: 'black',     backgroundColor: 'white',     fontSize: 30,     margin: 80   } });

這將定義一個css樣式，我們將在顯示“Hello World”字串時應用這個樣式。

在React Native 中，我們可以使用 Cascading Style Sheets (CSS) 文法來格式化UI樣式。

接下來敲入如下代碼:

class PropertyFinderApp extends React.Component {   render() {     return React.createElement(React.Text, {style: styles.text}, "Hello World!");   } }

這裡我們定義了一個JavaScript 類。JavaScript類的概念出現自ECMAScript 6。由於JavaScript是一門不斷演變的語言，因此web開發人員必須保持與瀏覽器的向下相容。由於ReactNative基於JavaScriptCore，因此我們完全可以放心使用它的現代文法特性，而不需要操心與老版本瀏覽器安全色的問題。

注意:如果你是Web開發人員，我建議你使用新的JavaScript文法。有一些工具比如 Babel ，可以將現代JavaScript文法轉變為傳統JavaScript文法，這樣就能和老式瀏覽器進行相容。

PropertyFinderApp 類繼承自 React.Componen，後者是React UI中的基礎。Components包含了一些不可變屬性、可變屬性和一些渲染方法。當然，這個簡單App中，我們就用到一個render方法。

ReactNative 的Components不同於UIKit 類，它們是輕量級的對象。架構會將ReactComponents轉換為對應的本地UI對象。

最後敲入如下代碼：

React.AppRegistry.registerComponent('PropertyFinder', function() { return PropertyFinderApp });

AppRegistry 代表了App的入口以及根組件。儲存檔案，返回Xcode。確保當前Scheme為PropertyFinder ，然後在模擬器運行App。你將看到如下效果：

看到了吧，模擬器將JavaScript代碼渲染為本地UI組件，你不會看到任何瀏覽器的痕迹。

你可以這樣來確認一下：

在Xcode中，選中  Debug\ViewDebugging\Capture View Hierarchy，查看本地視圖樹。你將找不到任何UIWebView執行個體。

在 Xcode 中開啟 AppDelegate.m，找到application:didFinishLaunchingWithOptions:方法。

在這個方法中，建立了一個RCTRootView，該對象負責載入JavaScript App並渲染相關視圖。

App一啟動，RCTRootView會載入如下URL的內容:

http://localhost:8081/index.ios.bundle

還記得App啟動時彈出的終端視窗嗎？終端視窗中啟動並執行packager和server會處理上述請求。

你可以用Safari來開啟上述URL，你將會看到一些JavaScript代碼。在ReactNative 架構代碼中你會找到“Hello World”相關代碼。

當App開啟時，這些代碼會被載入並執行。以我們的App來說，PropertyFinderApp組件會被載入，然後建立相應的本地UI組件。