摘要：利用來搭建代碼。雖然這不是安裝的唯一方式，但我發(fā)現(xiàn)，是非常好用的包管理器。終端窗口打開后，會(huì)啟動(dòng)，并由服務(wù)器處理以上請(qǐng)求。面對(duì)這種情況時(shí)，需要關(guān)閉終端窗口，停止在上的應(yīng)用，并重新運(yùn)行。使用設(shè)定應(yīng)用的用戶界面。命名這兩個(gè)文件為和。

【編者按】本篇文章的作者是 Joyce Echessa——渥合數(shù)位服務(wù)創(chuàng)辦人，畢業(yè)于臺(tái)灣大學(xué)，近年來專注于協(xié)助客戶進(jìn)行 App 軟體以及網(wǎng)站開發(fā)。本篇文章中，作者介紹通過 React Native 框架構(gòu)建一個(gè)示例應(yīng)用的開發(fā)過程，使得網(wǎng)絡(luò)技術(shù)和移動(dòng)開發(fā)碰撞出絢麗火花，本文系 OneAPM 工程師編譯整理：

我們已經(jīng)了解像 Titanium 和 PhoneGap 等框架，它們能讓開發(fā)者用 Web 技術(shù)構(gòu)建移動(dòng)應(yīng)用。這是一個(gè)優(yōu)勢(shì)，支持開發(fā)者使用原先網(wǎng)絡(luò)和移動(dòng)開發(fā)的相關(guān)技術(shù)。不僅如此，相同的代碼庫經(jīng)過小幅度的修改便能適用多個(gè)平臺(tái)——這就是著名的「一次編寫，到處運(yùn)行」。然而，當(dāng)涉及到構(gòu)建應(yīng)用的性能時(shí)，這些框架的缺點(diǎn)顯露無遺，盡管它們有一些吸引力，但卻一直更適用于構(gòu)建原生應(yīng)用。

React Native 卻與眾不同。像 PhoneGap 這樣的框架是將網(wǎng)頁內(nèi)容包裝成 WebView，導(dǎo)致 UI 元素并沒有原生的感覺，而 React Native 則使用原生 iOS 或 Android 組件支持的 JavaScript 組件，所以你構(gòu)建的應(yīng)用是完全原生的。

Facebook 的湯姆 Occhino 在文章末尾鏈接視頻中說，React Native 并非是「一次編寫，到處運(yùn)行」的框架。正如本教程所介紹，你使用特定平臺(tái)的組件來構(gòu)造 UI，所以并不能直接將同樣的代碼放到 Android 上運(yùn)行。React Native 是讓你學(xué)習(xí)這套技能，并可以用它在多種平臺(tái)上搭建應(yīng)用，Occhino 更進(jìn)一步闡明，這其實(shí)是「一次編寫，到處運(yùn)行」的框架。在本文中，作者將介紹利用 React Native 框架構(gòu)建一個(gè)簡(jiǎn)單應(yīng)用的完整開發(fā)過程。

首先，介紹一下在開發(fā)機(jī)器上安裝 React Native 的流程。

開始之前，應(yīng)該提醒大家：你可以從 GitHub 獲取 React Native 框架代碼。接著運(yùn)行其中的示例項(xiàng)目，比如2048（游戲）、Movies （電影瀏覽器應(yīng)用）、SampleApp（空白的 React Native 應(yīng)用）、TicTacToe （游戲）和 UIExplorer（這個(gè)應(yīng)用展現(xiàn)了所有可能用到的 React Native 組件，比如 ListView、TabBar、MapView、Slider 等）。這些應(yīng)用能幫助你學(xué)習(xí)使用 React Native 構(gòu)建 UI 元素，尤其是 UIExplorer 應(yīng)用程序，它提供了你可能需要用到的每個(gè) UI 元素。但是，有些應(yīng)用程序還有 Bug，筆者在嘗試運(yùn)行時(shí)也出現(xiàn)過幾次崩潰。盡管如此，它們?nèi)匀环浅Ｖ档脤W(xué)習(xí)，如需詳情，你可以了解下相關(guān)文檔。

現(xiàn)在開始安裝。React native 利用 Node.js 來搭建 JavaScript 代碼。如果你電腦上已經(jīng)安裝過，則可以跳過以下步驟，否則請(qǐng)繼續(xù)以下步驟。

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

在 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);