Question

现在我们将要获取数据了，要实现这个功能，就要使用到 GitHub 的 API，这非常简单而且容易上手。让我们开始吧。

增加搜索框

首先，需要添加搜索框。我们将使用一个普通的 TextInput 和一些样式来实现搜索框。参考如下的代码来修改 render 方法：

render: function() {
    return (
        <View style={styles.container}>
            <TextInput
                    autoCapitalize="none"
                    autoCorrect={false}
                    placeholder="Search for a project..."
                    style={styles.searchBarInput}
                />
        </View>
    );
}

基本上我们创建完成了有一些不同属性的 TextInput 对象，我们不需要自动填充和自动更正的功能，只需增加 placeholder 文本和一些样式。样式如下：

var styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'white',
    },
    searchBarInput: {
        marginTop: 30,
        padding: 5,
        fontSize: 15,
        //flex: 1,
        height: 30,
        backgroundColor: '#EAEAEA',
    },
});

我们修改了 TextInput 背景颜色来让它更明显，设置了 height 和 margin-top，增加了 padding。修改完成以后，看起来如下图：

方法代理

现在，我们希望用户在搜索框输入的时候，调用 API 来进行搜索。要做到这一点，我们需要完成方法的代理绑定，就是指当有一些行为发生时执行某个函数，在当前情况下的行为就是在搜索框停止输入。要做到这一点，我们只要设置文本框的 onEndEditing 属性，如下：

<TextInput
    autoCapitalize="none"
    autoCorrect={false}
    placeholder="Search for a project..."
    style={styles.searchBarInput}
    onEndEditing={this.onSearchChange}
/>

当搜索内容变化的时候，调用 GitHub API 查询结果的功能还没有实现，我们下面就来实现这个功能。

检索数据

现在我们来实现 onSearchChange 函数，通过 GitHub 的 API 来查询结果。如下：

var BASE_URL = 'https://api.github.com/search/repositories? q=';
...
var GithubFinder = React.createClass({
    ...
    onSearchChange: function(event: Object) {
        var searchTerm = event.nativeEvent.text.toLowerCase();
        var queryURL = BASE_URL + encodeURIComponent(searchTerm);
        fetch(queryURL)
        .then((response) => response.json())
        .then((responseData) => {
            if (responseData.items) {
                this.setState({
                    dataSource: this.state.dataSource.cloneWithRows
                        (responseData.items),
                });
            }
        })
        .done();
    },

});

在这个函数中，我们从搜索框中获取输入的关键字，用这个关键字拼接一个 URL。然后我们使用 fetch 方法调用 API 来获取数据结果，当获取到有效的数据时，我们使用这些数据来设置组件的 state 属性。我们还需要检查结果数据是否发生变化，如果获取到的是一个空响应或者错误响应，我们就不必修改数据源。我们会用到 responseData.items，它是请求响应后返回的数据内容。试着访问一下 https://api.github.com/search/repositories? q=tetris 这个链接，你就能看到将要使用的数据格式。

=>语法可能会让你有点困惑，不过在 React 中，这个语法用得非常多。其实它是定义一个内联函数的方法，允许我们使用括号中的参数立即执行函数，来完成一些功能。我们也能返回一个对象，就像我们使用 response.json() 做的事情一样；或者我们也能够创建一个花括号包裹的函数，就像上面用到的 responseDate。

在下面的章节中，我们会更多地讨论数据源，但是实际上它的功能是存储数据，这样我们以后就能够直接使用数据了。

现在我们已经完成了应用中数据检索的部分，我们的代码目前看是这样的：

'use strict';
var React = require('react-native');
var BASE_URL = "https://api.github.com/search/repositories? q=";

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

var GithubFinder = React.createClass({
    render: function() {
        return (
            <View style={styles.container}>
                <TextInput
                    autoCapitalize="none"
                    autoCorrect={false}
                    placeholder="Search for a project..."
                    style={styles.searchBarInput}
                    onEndEditing={this.onSearchChange}
                />
            </View>
        );
    },
    onSearchChange: function(event: Object) {
        var searchTerm = event.nativeEvent.text.toLowerCase();
        var queryURL = BASE_URL + encodeURIComponent(searchTerm);
        fetch(queryURL)
            .then((response) => response.json())
            .then((responseData) => {
                if (responseData.items) {
                    this.setState({
                        dataSource: this.state.dataSource.
                            cloneWithRows(responseData.items),
                    });
                }
            })
            .done();
        },
});

var styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'white',
    },
    searchBarInput: {
        marginTop: 30,
        padding: 5,
        fontSize: 15,
        flex: 1,
        height: 30,
        backgroundColor: '#EAEAEA',
    },
});

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