如何用 React Native 创建一个iOS APP？（三）

前两部分，《如何用 React Native 创建一个iOS APP？》，《如何用 React Native 创建一个iOS APP （二）？》中，我们分别讲了用 React Native 来创建 Navigation Bar，Tab Bar 等这些控件，今天在第三节，我们着重讲一下剩下的一些控件。闲话少叙，我们直入主题！

添加一个ListView

React Native 有一个叫做 ListView 的组件，可以显示滚动的行数据，基本上是 ios 项目上的一个术语表视图。
首先，按照所显示的修改解构的声明以包含多个组件，然后就可以使用。

var {
    Image,
    StyleSheet,
    Text,
    View,
    Component,
    ListView,
    TouchableHighlight
   } = React;

添加以下风格样式表：

separator: {
       height: 1,
       backgroundColor: '#dddddd'
   }

添加以下BookList类构造函数：

constructor(props) {
       super(props);
       this.state = {
           dataSource: new ListView.DataSource({
               rowHasChanged: (row1, row2) => row1 !== row2
           })
       };
   }

然后添加以下功能：

componentDidMount() {
    var books = FAKE_BOOK_DATA;
    this.setState({
        dataSource: this.state.dataSource.cloneWithRows(books)
    });
   }

在构造函数中，我们创建一个列表视图。数据源对象，并将其分配给数据源属性。列表视图使用的数据源是一个接口，可以确定更新了的 UI 改变所在的行。我们提供一个函数来比较双行的同一性，它可以用来决定数据列表的改变。

当组件加载/安装到用户界面视图时 componentDidMount() 便被调用。当这个函数被调用时，我们可以从我们的数据对象中设置数据源属性。
修改 render() 函数如下图所示：

render() {
    return (
        <ListView
            dataSource={this.state.dataSource}
            renderRow={this.renderBook.bind(this)}
            style={styles.listView}
            />
    );
}

接下来添加以下书目类函数：

renderBook(book) {
       return (
            <TouchableHighlight>
                <View>
                    <View style={styles.container}>
                        <Image
                            source={
   {
   uri: book.volumeInfo.imageLinks.thumbnail}}
                            style={styles.thumbnail} />
                        <View style={styles.rightContainer}>
                            <Text style={styles.title}>{book.volumeInfo.title}</Text>
                            <Text style={styles.author}>{book.volumeInfo.authors}</Text>
                        </View>
                    </View>
                    <View style={styles.separator} />
                </View>
            </TouchableHighlight>
       );
   }

以上创建了一个在 render() 中的列表视图组件呈现。这是datasource 属性设置为数据源的值，我们前面定义的函数renderBook() 呈现 ListView 的行。

在 renderBook() 我们使用 TouchableHighlight 组件。这是一个包装器进行观点正确的响应触摸。在低压下，包装视图的透明度降低，使得衬底的颜色显示变暗或视图着色。如果你压在一个列表视图，你将看到突出的颜色，就像我们先前选择一个表视图单元格一样。添加一个空视图组件底部的行分隔符的样式。这种视图将只是一个灰色水平线，就像每一行之间的一个分区。

重新加载应用程序，你应该看到只有一个细胞的表视图。

接下来把真实的数据加载到应用程序。
从文件中删除FAKE—BOOK—DATA变量，添加以下数据来代替它。这是我们从数据中加载的 URL。

var REQUEST_URL = 'https://www.googleapis.com/books/v1/volumes?q=subject:fiction';

修改 destructuring 声明。

var {
    Image,
    StyleSheet,
    Text,
    View,
    Component,
    ListView,
    TouchableHighlight,
    ActivityIndicatorIOS
   } = React;

添加以下程序：

listView: {
       backgroundColor: '#F5FCFF'
   },
   loading: {