React Native 简介：用 JavaScript 搭建 iOS 应用 (1)

摘要：利用来搭建代码。虽然这不是安装的唯一方式，但我发现，是非常好用的包管理器。终端窗口打开后，会启动，并由服务器处理以上请求。面对这种情况时，需要关闭终端窗口，停止在上的应用，并重新运行。使用设定应用的用户界面。命名这两个文件为和。

【编者按】本篇文章的作者是 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);