如何用 React Native 建立一個iOS APP？

誠然，React Native 結合了 Web 應用和 Native 應用的優點，可使用 JavaScript 來開發 iOS 和 Android 原生應用。在 JavaScript 中用 React 抽象操做系統原生的 UI 組件，代替 DOM 元素來渲染等。

React Native 使你可以使用基於 JavaScript 和 React 一致的開發體驗在本地平臺上構建世界一流的應用程序體驗。React Native 把重點放在全部開發人員關心的平臺的開發效率上——開發者只需學習一種語言就能輕易爲任何平臺高效地編寫代碼。Facebook 在多個應用程序產品中使用了 React Native，並將繼續爲 React Native 投資。

其好處顯而易見：減小了人力、節省了時間、避免了 iOS 與 Android 版本發佈的時間差，開發新功能能夠更迅速。

下面，咱們能夠嘗試用React Native建立一個 iOS APP.

在咱們開始以前，我建議：你能夠在 Github 裏先下載 React Native 的代碼框架。裏面還有一些示例項目，2048 的遊戲， Movies（一個看電影的 APP）,SampleApp, TicTacToe (一款遊戲)和 UIExplorer（能顯示出全部用 React Native 替代的控件，如ListView，TabBar，MapView, Slider）），對於學習用如何用 React Native 建立 UI,這些都是很是好的例子,尤爲是 UIExplorer APP，它幾乎用到了每個您的 APP 中須要建立的 UI 控件。

首先，咱們先來安裝相應的工具。React native 是使用 Node.js 來 建立 JavaScript 代碼。若是你已經在你電腦上安裝上了這些工具，你能夠跳過下面這幾步。

推薦使用 Homebrew的方式來安裝 nvm，watchman 和 flow。

在Mac下，若是用homebrew，那麼只用一行就能夠裝好:

brew install node

接下來安裝watchman

brew install watchman

watchman是Facebook的一個文件觀察者。React Native 用它來檢測代碼的變化.

接下來安裝 npm

npm install -g react-native-cli

nmp 是 node的一個三方管理工具，至關於 Ruby中的RubyGems，iOS中的 CocoaPods，Java中的 Gradle/Maven，基本上，它使您可以輕鬆下載和管理你的項目須要的任何依賴庫。

在終端，找到你但願保存的項目文件，而後運行下面的文件夾。

react-native init BookSearch

以上使用 CLI 工具來構建一個 Native 項目，是準備創建並運行原樣。當這個過程完成後，你就會在終端窗口中打開 Xcode 的BookSearch.xcodeproj 並運行應用程序像往常同樣。作到這一點，模擬器將啓動您的應用程序的運行。一個終端窗口也將打開。當一個Native應用程序啓動時，它加載從如下網址 JavaScript 的應用程序。

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


終端被打開，服務器開始做出反應來處理上述請求。該 Native 負責讀取和建設 JSX（咱們將看看這個版本）和 JavaScript 代碼。

運行這個 APP,你能夠看到下圖中的模擬器，若是你想在開發運行有幾個步驟，你應該這樣作。

歡迎屏幕給出了一些關鍵的指令，你應該注意：編輯應用程序的用戶界面，你應該修改，當你建立項目時生成的 index.ios.js 文件，若是您更改 JavaScript 代碼，從新加載命令應用程序 Command-R 看到的變化，若是你想要更多的選擇，使用命令控制 Command-Control-Z 打開開發者菜單，提供了這樣的選項，使現場從新加載和瀏覽器的調試。

在任什麼時候候作本教程時你可能會遇到一個紅色屏幕模擬器，能夠檢查錯誤消息。它能讓你知道這個問題是與你的代碼仍是服務器有關係。當我接收到錯誤的消息「沒法鏈接到服務器」 在模擬器和檢查終端有一個「流程終止」 錯誤消息時我陷入了服務器鏈接問題。當這種狀況發生時，關閉終端窗口，中止在 Xcode 中的應用並再次運行它。對於其餘錯誤，是因爲語法錯誤代碼中或網絡請求超時時（若是你的應用從互聯網上獲取數據），一個簡單的從新加載後修復這個問題應該怎麼作。

若是你在敦促 Command-R 鍵盤但什麼都沒有發生，硬件鍵盤可能沒有鏈接到模擬器上。選擇模擬器上的選項菜單以鏈接它：Hardware > Keyboard > Connect Hardware Keyboard.

若是你按上邊程序作了它依然不能從新加載，那麼你可能須要重啓你的電腦。我遇到過一次忽然死機，重啓電腦能夠完成加載。

咱們如今開始構建應用程序，打開 index.ios.js 文件。我建議使用適合 web 開發的 IDE。你還可使用 Xcode，但你會發現它並不適合由於在代碼格式化、自動完成和語法錯誤突出顯示時它不是很是靈活。你能夠經過學習本文來決定並選擇合適的 JavaScript IDE。我用過 RudbyMine，但實際上任何 IDE 都支持 JavaScript。若是你能獲得一個支持 JSX 的那真很不錯。

當你打開 indx.ios.js 文件，你就會看到正在運行的應用程序構建 UI 的代碼。你可能看到如下代碼塊。

'use strict'

以上代碼啓用了嚴格的模式，增長了處理原生 JavaScript 代碼對錯誤的改善。

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

以上代碼能夠加載 react-native 模塊，並將它賦予變量的反應。在你調用任何模塊以前你須要把外部模塊加載到你的文件中來。能夠把它做爲Swift 和 Objective-C 的導入庫。

var { AppRegistry, StyleSheet, Text,
View,
} = React;

上面是一個解構賦值，你能夠經過它將多個對象屬性分配給一個變量。這能讓他們在文件做用域被引用。以上是可選擇的，但若是你不用它，那麼每次你使用一個組件在你代碼中時，你就必須使用徹底限定的名稱，例如：「React.AppRegistry」而不能只用「AppRegistry」 、「React.StyleSheet」 而不能用「StyleSheet」 等等。

var BookSearch = React.createClass({
  render: function() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit index.ios.js
        </Text>
        <Text style={styles.instructions}>
          Press Cmd+R to reload,{'\n'}
          Cmd+Control+Z for dev menu
        </Text>
      </View>
    );
  }
});

上面建立一個類只有一個渲染 () 函數。在渲染函數中不管什麼被定義都是將輸出到屏幕上。上述使用 JSX（JavaScript語法擴展）來構建應用程序的 UI。若是您之前使用過 XML（甚至HTML），JSX 就會記住並熟悉你。它具備相同的均衡功能來打開和關閉標籤並使用屬性來設置值標籤。你不須要使用 JSX 本地反應，你可使用純 JavaScript，但 JSX 建議它的簡單定義樹結構。若是你有不少 UI 的代碼，經過大型的 JSX 樹結構將更容易閱讀理解。

var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

上面的樣式應用可於視圖的內容。若是你作過 web 開發或用過 CSS（層疊樣式表），在此以前這應該是熟悉的。React Native 使用 CSS 樣式應用程序的UI。若是你看看 JSX 代碼，你會看到不一樣風格的代碼被用在不一樣的地方。例如: style={style.container}設置樣式定義容器的外部視圖包含其餘UI組件。

上面的樣式應用可於視圖的內容。若是你作過 web 開發或用過 CSS（層疊樣式表），在此以前這應該是熟悉的。React Native 使用 CSS 樣式應用程序的 UI。若是你看看 JSX 代碼，你會看到不一樣風格的代碼被用在不一樣的地方。例如: style={style.container}設置樣式定義容器的外部視圖包含其餘 UI 組件。

（未完待續）

OneAPM Mobile Insight以真實用戶體驗爲度量標準進行 Crash 分析，監控網絡請求及網絡錯誤，提高用戶留存。訪問 OneAPM 官方網站感覺更多應用性能優化體驗，想閱讀更多技術文章，請訪問 OneAPM 官方技術博客。
本文轉自 OneAPM 官方博客