Question

在这一节中，我们将剖析一下 index.ios.js 文件，从而弄清楚组成一个 React 应用的各个部分。

从组件开始，我们看看如下的代码：

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

这是在我们应用中会用到的组件的列表。在 React 中，我们可以用组件（component）来创建 UI 节点，比如我们有一些 Text 或者 View 组件。组件是模块化的，它们代表一些可以复用的内容。另外，模块化的一个重要的方面是它们可以进行嵌套组合。Text 组件是可以嵌套到 View 组件中的，比如在上面这个例子中，我们放入了将要使用的所有组件，这些组件是 React Native 提供给我们的内置组件。其他的组件还有 Image、TextInput 和 ListView，在后面我们会看到它们。

render 函数

使用以下这段代码，我们能够创建一个自定义组件：

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

我们使用 React.createClass 方法，通过传入包含一些函数的 JSON 对象来创建我们的自定义组件。在这里，我们创建一个名为 GithubFinder 的组件。这个组件也可以被看作是和 Text 或者 View 同类的组件，它们有相同的使用方法。我们能看到 GithubFinder 组件也是由其他的可视化组件构成的。在这个组件中，我们只包含了一个方法：render，这个方法没有参数，只是简单地返回我们希望这个组件渲染出来的视图。在这个例子中，我们希望返回的视图是这样的：

<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>

如果你比较熟悉 HTML，这些代码应该挺眼熟的：有嵌套的标签，每个标签都有自己的属性。这体现了我们用 React Native 实现的模块化。我们能够构建相同的结构，通过组件的属性来渲染多个不同的效果。顺便说一句，看到{'\n'}了吗？这是一个转义字符，换行显示用的。

样式

在我们的组件中，我们能够看到 style 属性。我们在文件的底部定义它们的取值：

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

调用 StyleSheet.create 函数能够创建很多不同的样式规则，可以把它们想象成 CSS 规则，用来在每个条目中定义不同的样式属性。

大多数属性的作用都是显而易见的：color、textAlign、margin 等。不过 flex 不太一样，它是 Flexbox 的一个属性，它可以用来定义内容在视图中的布局，比如将一个项目放到另外一个项目的左边，或者诸如此类的事情。

通过这个常用样式的对象，我们能够访问所有不同的样式规则。比如说，我们可以通过 styles.container 来定义相应 View 组件的样式。

对于已经做过 Objective-C 开发的人来说，这种类似 CSS 的样式定义方式要比使用接口来构建样式容易得多，它将节省我们大量的时间。除此之外，我们不需要重新加载整个应用来查看样式的变化，只需要在模拟器中使用 Cmd+R 组合键就可以看到文本的变化了，太神奇了！注意，React CSS 是常用 CSS 的一个子集。可以看到，大多数的属性会稍微修改一下名称，比如 text-align 会写成 textAlign。

注册组件

最后，在文件的末尾有这样一行代码：

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

AppRegistry.registerComponent 方法用来注册我们的根组件。这意味着，当 iOS 应用开始运行时，GithubFinder 组件是出现的第一个组件。因此，当我们的应用开始运行的时候，它就知道该怎么做了。这个方法的调用一般会放到我们 React Native 应用代码的最后一行，基本上是开启应用的方式之一。

修改组件

现在我们已经理解组件了，让我们试着修改一下它们。修改 render 函数如下：

render: function() {
    return (
        <View style={styles.container}>
        <Text>
          This is my first custom view!
        </Text>
        <Image
          source={{uri : 'http://www.polyvore.com/cgi/img-thing? .
              out=jpg&size=l&tid=27610859'}}
          style={styles.customimg}
        />
      </View>
    );
}

你可能已经注意到了，当我们使用变量时，使用了{}符号。我们通过这种方式把一个变量名添加到 HTML 中。在这里这么做的原因是我们想要给节点增加样式，比如说，我们提到的 styles 变量，不再仅仅是简单的关键字’styles’了。此外，对于标签中的 source 属性，我们用两对{}来表示一个 JavaScript 对象，这个对象是用在节点属性中的。

参考下面的内容修改一下样式对象，为 Image 对象增加宽和高。

var styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    customimg: {
        width: 200,
        height: 200,
    },
});

另外还有一件要做的事，即增加我们当前使用的 Image 组件的声明，在文件的开头修改 React 对象。如下：

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

现在，我们应用的代码看起来是下面这样的：

'use strict';

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

    var GithubFinder = React.createClass({
        render: function() {
            return (
                <View style ={styles.container}>
                    <Text>
                          This is my first custom view!
                    </Text>
                    <Image
                          source={{uri:'http://www.polyvore.com/cgi/
                            img-thing? .out=jpg&amp; size=l&amp; tid
                            =27610859'}} style={styles.customimg}/>
                </View>
            );

        }
    });

    var styles = StyleSheet.create({
        container: {
            flex: 1,
            justifyContent: 'center',
            alignItems: 'center',
            backgroundColor: '#F5FCFF',
        },
        customimg: {
            width: 200,
            height: 200,
        },
    });

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

应用界面是这样的：

喔！现在你已经实现了自己的第一个自定义 View。