组件之navigator、ListView

发表于 | 分类于 |

使用导航器可以让你在应用的不同场景（页面）进行切换。导航器通过不同路由来分辨不同的场景。
利用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条】

效果图：
alt