组件之navigator、ListView

Navigator 组件

使用导航器可以让你在应用的不同场景（页面）进行切换。导航器通过不同路由来分辨不同的场景。
利用renderScene方法，导航栏可以指定的路由来渲染场景

可以通过configureScene属性获取指定路由对象的配置信息，从而改变场景的动画或者手势。查看
navigator.SceneConfigs来获取默认的动画和更多的场景配置选项。

注意：这个组件本文说明简单，但使用上有一定难度。

在使用该组件时，一般需要以下几步：

1. 属性：

   • configScene (function)

   可选的函数，用来配置场景动画和手势。会带有两个参数调用，一个是当前路由，一个是当前的路由栈，
   然后它返回一个场景配置对象。

   • initialRoute (object)

   定义启动加载的路由，路由是导航栏用来识别渲染场景的一个对象，initialRoute必须是initialRouteStack
   中的一个路由。initialRoute默认是initialRouteStack中最后一项。

   • initialRouteStack (object)

   提供一个路由集合用来初始化。如果没有设置初始路由的话必须设置初始路由。如果没有提供该属性，它将默认被设置
   成一个只含有initialRoute的数组。

   • navigationBar (node)

   可选参数，提供一个在场景切换的时候保持的导航条。

   • navigator (object)

   可选参数，提供从父容器获得的导航器对象。

   • onDidFocus (function)

   每当导航条切换完成或者初始化之后，调用此函数，参数为新场景的路由。

   • onWillFocus (function)

   会在导航条切换之前调用，参数为目标路由。

   • renderScene (function)

   必要参数。用来渲染指定参数路由的场景。调用的参数是路由和导航器。

   • senceStyle (View#style)

   将会应用在每个场景容器上的样式。

ListView 组件

核心组件，用于高效地显示一个可以垂直滚动的变化的数据列表。最基本的使用方式就是创建一个
ListView.DataSource数据源，然后给它传递一个普通的数据数组，再使用数据源实例化一个ListView组件
，并且定义它的回调函数_renderRow。该函数会接受数组中每个数据作为参数。返回一个可渲染的组件。

ListView还支持一些高级特性，这个本人还没有尝试，以后详解哈。

属性：

• renderRow (function)

  从数据源中接收一条数据，以及和它所在的section的ID。返回一个可渲染的组件来为这行数据进行渲染。默认情况下
  参数中的数据就是放进数据源的数据本身，不过也可以提供一些转换器。

  如果某一行正在被高亮（通过调用highlightRow函数），ListView会得到相应的通知。当一行被高亮时，其两侧的分割线
  会被隐藏。行的高亮状态可以通过调用highlistRow(null)来重置。

• renderHeader (function)

  渲染页头。

• renderSeparator (function)

  如果提供了此属性，一个可渲染的组件会被渲染在每一行的下面。除了小节标题的前面的最后一行。在其上方的小节ID和行ID，以及
  邻近的行是否被高亮会作为参数被传递进来。

例子：

    /**
     * 猫眼电影列表页
     * 数据
     * http://m.maoyan.com/movie/list.json?type=hot&offset=0&limit=1000
     */

    import React, { Component } from 'react';
    import {
        ListView,
        ActivityIndicator,
        View,
        Text,
        Image,
        StyleSheet
    } from 'react-native';

    // 引入猫眼数据
    import movieData from './../public/json/maoyan.json';

    export default class MoveList extends Component {
        constructor(props) {
            super(props);
            var ds = new ListView.DataSource({
                rowHasChanged: (oldData, newData) => oldData !== newData
            });
            this.state = {
                dataSource: ds
            };
        }

        _renderHeader() {
            return (
                <View style={ styles.header }>
                    <Text style={ styles.header_txt }>猫眼热门电影</Text>
                </View>
            );
        }

        _renderRow(movie) {
            return (
                <View style={ styles.row }>
                    <View style={ styles.left }>
                        <Image source={{ uri: movie.img }} style={ styles.img }></Image>
                    </View>
                    <View style={ styles.right }>
                        <Text style={[ styles.nm, styles.txt_right ]}>{ movie.nm }</Text>
                        <Text style={[ styles.dir, styles.txt_right ]}>导演：{ movie.dir }</Text>
                        <Text style={[ styles.rt, styles.txt_right ]}>上映时间：{ movie.rt }</Text>
                    </View>
                </View>
            );
        }

        _renderSeparator() {
            return (
                <View style={ styles.separator }></View>
            );
        }

        componentDidMount() {
            // 把已经解析好的数据使用到我们的页面
            var ds = new ListView.DataSource({
                rowHasChanged: (oldData,newData) => oldData !== newData
            });
            this.setState({
                dataSource: ds.cloneWithRows(movieData.data.movies)
            });
        }

        render() {
            return (
                <ListView
                    style={ styles.container }
                    dataSource={ this.state.dataSource }
                    renderHeader={ this._renderHeader }
                    renderRow={ this._renderRow }
                    renderSeparator={ this._renderSeparator }
                >

                </ListView>
            );
        }
    }

    const styles = StyleSheet.create({
        container: {
            marginTop: 25,
            marginLeft: 10,
            marginRight: 10,
        },
        header: {
            height: 50,
            justifyContent: 'center',
            alignItems: 'center',
            backgroundColor: 'pink',
            borderRadius: 6,
        },
        header_txt: {
            fontSize: 30,
            color: 'darkgrey'
        },
        row: {
            height: 160,
            flexDirection: 'row',
            marginTop: 10,
        },
        left: {
            width: 110,
        },
        right: {
            justifyContent: 'center',
        },
        separator: {
            height: 2,
            backgroundColor: '#ccc'
        },
        img: {
            width: 100,
            height: 150,
        },
        txt_right: {
            marginBottom: 10
        },
        nm: {
            fontSize: 26,
            fontWeight: 'bold',
        },
        dir: {
            fontSize: 16,
            color: 'orange'
        },
        rt: {
            color: 'grey'
        }
    });

提示 有关猫眼数据，可点击链接接收JSON数据：http://m.maoyan.com/movie/list.json?type=hot&offset=0&limit=100【limit=?，这里输入的是你要获取电影信息的条目数，最多只能获取100条】