显示结果

现在我们有了自己的数据，接下来我们让结果以列表形式呈现，在这个列表视图中，每一行都对应一条通过搜索 GitHub 返回的数据。开始吧！

组件状态

在前一节中，我们调用了 this.setState 方法，这是我们还没有介绍的 React 的一个重要的概念。每一个组件都有自己的状态（state），用来存储组件的数据。在这个例子中，我们希望能够存储当前列表中显示的数据。当我们的组件首次被渲染的时候，可以通过 getInitialState 方法来初始化状态。如下：

var GithubFinder = React.createClass({
...
    getInitialState: function() {
        return {
            dataSource: new ListView.DataSource({
                rowHasChanged: (row1, row2) => row1 ! == row2,
            }),
        };
    },
...
});

注意，因为我们在这里使用了 ListView，所以我们需要把它添加到文件最开始的组件列表中，如下：

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

在这里，我们通过属性创建了一个空白的数据源，该函数用来监控一行数据是否发生了变化。其实很简单，这个函数的作用就是：如果两次的数据不相同的话，告诉数据源该行数据发生了变化。

现在我们已经设置好初始状态了，而且我们的数据检索方法已经能够通过搜索结果来成功地设置数据源的内容行了。以后如果获取到新数据，就能够通过修改数据源来改变内容行的显示了。

创建 ListView 组件

现在，我们需要创建列表视图来显示已经加载的数据源结果。通过在 render 方法中添加一个组件来实现这个效果：

render: function() {
    var content;
    if (this.state.dataSource.getRowCount() === 0) {
        content =
            <Text>
                Please enter a search term to see results.
            </Text>;
    } else {
        content =
            <ListView
                ref="listview"
                dataSource={this.state.dataSource}
                renderRow={this.renderRow}
                automaticallyAdjustContentInsets={false}
                keyboardDismissMode="onDrag"
                keyboardShouldPersistTaps={true}
                showsVerticalScrollIndicator={true}/>;
    }
    return (
        <View style={styles.container}>
            <TextInput
                autoCapitalize="none"
                autoCorrect={false}
                placeholder="Search for a project..."
                style={styles.searchBarInput}
                onEndEditing={this.onSearchChange}/>
            {content}
        </View>
    );
},

让我们来一段一段地看一下。首先，增加了一个搜索框，就像我们之前做的一样。然后，创建了一个叫作 content 的变量，用来定义在视图中应该渲染什么样的内容。如果数据源中的数据是空的，就意味着我们不需要显示任何数据，所以显示的是一段用来提示用户输入的文本。如果能够获取到数据，我们就增加一个数据列表的视图。

在完成列表视图对象的时候，我们需要认识到有几个属性是必须设置的。第一个是数据源，用来渲染列表；然后是我们提供的一个名为 renderRow 的方法，这个方法用来渲染列表中的每一行数据；再然后是我们实现的几个样式，用来帮助定义 ListView 的展现。还有其他的一些可用属性，可以在文档中找到。

创建每个数据单元

现在我们要渲染每一条结果数据了。我们来实现一个方法，通过 this.renderRow 来完成方法的绑定，从而达到渲染数据的效果。方法的实现如下：

renderRow: function(repo: Object) {
    return (
        <View>
            <View style={styles.row}>
                <Text>
                    {repo.name}
                </Text>
            </View>
            <View style={styles.cellBorder} />
        </View>
      );
},

在这里，我们创建了一个基本的结果条目，用来显示搜索结果中的名称。我们给 styles 增加两个样式规则，row 和 cellBorder，用来渲染这个结果条目。

row: {
    alignItems: 'center',
    backgroundColor: 'white',
    flexDirection: 'row',
    padding: 5,
},
cellBorder: {
    backgroundColor: 'rgba(0, 0, 0, 0.1)',
    height: 1,
    marginLeft: 4,
},

现在如果我们搜索一个目标，我们将看到如下的显示结果：

我们就要完成这个 App 了。

给列表中每个结果项设置样式

现在，我们来给搜索结果的列表项增加一些细节和样式，让它们看起来更美观。

首先，我们给每行列表项增加一个用户缩略图，然后把用户名称和仓库名称也添加上去。其中一个显示为标题，另一个显示为子标题。最后我们给容器也增加一些样式，让它更好看一些。

下面是我们修改后的 renderRow 方法：

renderRow: function(repo: Object) {
    return (
        <View>
            <View style={styles.row}>
                <Image
                    source={{uri: repo.owner.avatar_url}}
                    style={styles.profpic}/>
                <View style={styles.textcontainer}>
                    <Text style={styles.title}>{repo.name}</Text>
                    <Text style={styles.subtitle}>{repo.owner.login
                        }</Text>
                </View>
            </View>
            <View style={styles.cellBorder} />
        </View>
    );
},

最后，列出所有我们新建的样式：

profpic: {
    width: 50,
    height: 50,
},
title: {
    fontSize: 20,
    marginBottom: 8,
    fontWeight: 'bold'
},
subtitle: {
    fontSize: 16,
    marginBottom: 8,
},

textcontainer: {
    paddingLeft: 10,
},

此外，在我们没有输入任何搜索关键字的时候，会显示一句提示文字，我们也增加一些样式来让这部分内容显示得更好看，如下：

blanktext: {
    padding: 10,
    fontSize: 20,
}
  ...
<Text style={styles.blanktext}>
    Please enter a search term to see results.
</Text>

试着输入搜索词以后滚动查看搜索结果，你将看到我们的搜索结果列表看起来更好看了！完成的 App 看起来效果如下：