摘要：利用來搭建代碼。雖然這不是安裝的唯一方式，但我發現，是非常好用的包管理器。終端窗口打開后，會啟動，并由服務器處理以上請求。面對這種情況時，需要關閉終端窗口，停止在上的應用，并重新運行。使用設定應用的用戶界面。命名這兩個文件為和。

【編者按】本篇文章的作者是 Joyce Echessa——渥合數位服務創辦人，畢業于臺灣大學，近年來專注于協助客戶進行 App 軟體以及網站開發。本篇文章中，作者介紹通過 React Native 框架構建一個示例應用的開發過程，使得網絡技術和移動開發碰撞出絢麗火花，本文系 OneAPM 工程師編譯整理：

我們已經了解像 Titanium 和 PhoneGap 等框架，它們能讓開發者用 Web 技術構建移動應用。這是一個優勢，支持開發者使用原先網絡和移動開發的相關技術。不僅如此，相同的代碼庫經過小幅度的修改便能適用多個平臺——這就是著名的「一次編寫，到處運行」。然而，當涉及到構建應用的性能時，這些框架的缺點顯露無遺，盡管它們有一些吸引力，但卻一直更適用于構建原生應用。

React Native 卻與眾不同。像 PhoneGap 這樣的框架是將網頁內容包裝成 WebView，導致 UI 元素并沒有原生的感覺，而 React Native 則使用原生 iOS 或 Android 組件支持的 JavaScript 組件，所以你構建的應用是完全原生的。

Facebook 的湯姆 Occhino 在文章末尾鏈接視頻中說，React Native 并非是「一次編寫，到處運行」的框架。正如本教程所介紹，你使用特定平臺的組件來構造 UI，所以并不能直接將同樣的代碼放到 Android 上運行。React Native 是讓你學習這套技能，并可以用它在多種平臺上搭建應用，Occhino 更進一步闡明，這其實是「一次編寫，到處運行」的框架。在本文中，作者將介紹利用 React Native 框架構建一個簡單應用的完整開發過程。

首先，介紹一下在開發機器上安裝 React Native 的流程。

開始之前，應該提醒大家：你可以從 GitHub 獲取 React Native 框架代碼。接著運行其中的示例項目，比如2048（游戲）、Movies （電影瀏覽器應用）、SampleApp（空白的 React Native 應用）、TicTacToe （游戲）和 UIExplorer（這個應用展現了所有可能用到的 React Native 組件，比如 ListView、TabBar、MapView、Slider 等）。這些應用能幫助你學習使用 React Native 構建 UI 元素，尤其是 UIExplorer 應用程序，它提供了你可能需要用到的每個 UI 元素。但是，有些應用程序還有 Bug，筆者在嘗試運行時也出現過幾次崩潰。盡管如此，它們仍然非常值得學習，如需詳情，你可以了解下相關文檔。

現在開始安裝。React native 利用 Node.js 來搭建 JavaScript 代碼。如果你電腦上已經安裝過，則可以跳過以下步驟，否則請繼續以下步驟。

我們選擇使用 Homebrew 來安裝 Node.js 框架。雖然這不是安裝 Node 的唯一方式，但我發現，Homebrew 是非常好用的包管理器。你可以用它很容易地安裝最新或特定版本的包、使用不同版本的軟件包、選擇要使用的版本、更新和卸載包等。想要安裝 Homebrew，可以直接去官網，按照網頁頁面頂部指令即可。由于鏈接可能會變，這里就不貼出下載鏈接了。

在 Homebrew 安裝好后，粘貼以下指令到終端窗口以安裝 Node.js。

Swiftbrew install node

Swiftbrew install watchman

Swiftnpm install -g react-native-cli

Swiftreact-native init BookSearch

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

JavaScript"use strict";

JavaScriptvar React = require("react-native");

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

JavaScriptvar BookSearch = React.createClass({
  render: function() {
    return (
      
        
          Welcome to React Native!
        
        
          To get started, edit index.ios.js
        
        
          Press Cmd+R to reload,{"
"}
          Cmd+Control+Z for dev menu
        
      
    );
  }
});

JavaScriptvar 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,
  },
});

JavaScriptAppRegistry.registerComponent("BookSearch", () => BookSearch);

Xcode"use strict";

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

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

var styles = StyleSheet.create({
    description: {
        fontSize: 20,
        backgroundColor: "white"
    },
    container: {
        flex: 1,
        justifyContent: "center",
        alignItems: "center"
    }
});

class Featured extends Component {
    render() {
        return (
       
        
           Featured Tab
        
    
        );
    }
}

module.exports = Featured;

javaScript"use strict";

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

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

var styles = StyleSheet.create({
    description: {
        fontSize: 20,
        backgroundColor: "white"
    },
    container: {
        flex: 1,
        justifyContent: "center",
        alignItems: "center"
    }
});

class Search extends Component {
    render() {
        return (
        
            
              Search Tab
            
        
        );
    }
}

module.exports = Search;

javascript"use strict";

var React = require("react-native");
var Featured = require("./Featured");
var Search = require("./Search");

var {
    AppRegistry,
    TabBarIOS,
    Component
   } = React;

class BookSearch extends Component {

    constructor(props) {
        super(props);
        this.state = {
            selectedTab: "featured"
        };
    }

    render() {
        return (
            
                 {
                        this.setState({
                            selectedTab: "featured"
                        });
                    }}>
                    
                
                 {
                        this.setState({
                            selectedTab: "search"
                        });
                    }}>
                    
                
            
        );
    }
}

AppRegistry.registerComponent("BookSearch", () => BookSearch);