Question

在这一节中，我们将使用 React Native 创建一个基本的“Hello World”程序。通过这个例子，我们将学习到如何开始创建一个项目、如何使用 Xcode、如何使用模拟器，以及在创建的项目中都包含什么文件。

创建项目

我们将使用之前安装过的 React Native 命令行接口（React Native command-line-interface）来创建项目。首先打开终端，进入你想要存放项目的目录中，输入以下的命令：

react-native init GithubFinder

命令执行完成后，你能在终端界面看到类似下面信息的输出：

Next steps:
Open /Users/Matt/Desktop/GithubFinder/GithubFinder.xcodeproj in
    Xcode
Hit Run button

这就意味着我们已经使用 React Native 成功地创建了一个 iOS 应用了。如果你打开新建的项目目录，能看到以下的文件：

- GithubFinder.xcodeproj

- iOS

- index.ios.js

- node_modules

- package.json

在稍后的章节中，我们会了解到这些文件的作用，以及哪些文件对我们来说更重要。

使用 Xcode

现在，我们来打开这个应用。先运行 Xcode，然后在 Xcode 界面中选择：

File > Open

在我们刚刚创建的目录中，选择 githubfinder.xcodeproj 文件打开项目，然后单击 Xcode 界面中位于左上部的 Play 键，或者使用组合键 Cmd+R 来运行你的应用。然后能够看到一个新的终端窗口弹出来，在窗口上显示类似这样的信息：

===============================================================
| 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/Matt/Desktop/GithubFinder

不要关闭这个终端窗口，在这个终端中会将你的 JavaScript 代码打包到你的 iOS 应用中。现在你可以最小化 Xcode 和终端窗口，暂时用不到它们了。

使用模拟器

我们将使用模拟器来模拟一个 iOS 设备，这样做是因为如果在真实的设备上运行的话，必须要有一个 iOS 开发者账号。模拟器看上去是这样的：

对我们而言，模拟器使用起来非常简单。只需要使用组合键 Cmd+R 就可以刷新并重新加载应用。当你修改了应用的相关内容时，你就会发现这样做有多么简单快捷了。

项目结构

现在模拟器已经能够运行起来了，让我们回到刚才创建的项目的结构上。我们之前提到过里面的文件，现在来依次看一下每一个文件。

- GithubFinder.xcodeproj：包含了在 Xcode 中打开项目时所需要用到的详细配置。Xcode 使用这个文件来打开项目。

- iOS：由 React Native 创建的文件目录，包含所有的 iOS 代码。注意，我们并不关注这个，所以可以忽略。

- node_modules：包含 Node 需要的模块，我们这里也不太需要关注。

- package.json：记录我们应用的一些细节内容。

对于我们创建自己的应用而言，这四个文件的相关性并不是特别大。事实上，我们真正需要关注的只有一个文件，就是 index.ios.js。从开发者的角度来说，这使得开发变得非常简单。我们可以在这个文件中定义应用的样式及行为。

该文件中的代码看起来是这样的：

/＊＊
  ＊ Sample React Native App
  ＊ https://github.com/facebook/react-native
  ＊/
'use strict';

var React = require('react-native');
var {
    AppRegistry,
    StyleSheet,
    Text,
    View,
} = React;

var GithubFinder = 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>
        );
    }
});

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

AppRegistry.registerComponent('GithubFinder', () => GithubFinder);

这些代码在某些方面可能看起来比较熟悉，其中也包含了很多我们在开发中会遇到的概念，下一节将会解释这个文件中包含的概念。