React Native -- ListView的基本用法

来源：互联网发布：网络思想政治教育提出编辑：程序博客网时间：2024/06/05 07:07

1.属性：

dataSource: 列表以来的数据源

initialListSize: 指定组件刚加载时渲染多少行数据

onChangeVisibleRows（function）可见row的集合变化时调用此函数。

onEndReached（function）: 所有数据已经被渲染，滚动到列表底部时会调用此函数，原生的滚动事件会被作为参数传递。第一次渲染时，数据不足以渲染整个屏幕，也会调用此函数。

onEndReachedThreshold: 调用onEndReached前的临界值

pageSize：每次事件循环渲染的行数。

renderRow (function):

(rowData, sectionID, rowID, highlightRow) => renderable

从数据源(Data source)中接受一条数据，以及它和它所在section的ID。返回一个可渲染的组件来为这行数据进行渲染。默认情况下参数中的数据就是放进数据源中的数据本身，不过也可以提供一些转换器。
如果某一行正在被高亮（通过调用highlightRow函数），ListView会得到相应的通知。当一行被高亮时，其两侧的分割线会被隐藏。行的高亮状态可以通过调用highlightRow(null)来重置

2. 方法：

scrollTo ：滚动到指定的x，y偏移处

scrollToEnd 滚动到视图的底部

3. 最基本的使用发放就是创建一个Listview.DataSource数据源，然后给它传递一个普通的数据数组，再用数据源实例化一个List View组件，并定义它的renderRow回调函数，这个函数会接受数组中的每个数据作为参数，返回listView的每一行。

class TestListview extends React.Component {    constructor(props) {        super(props);        var myData = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});        this.state = {            dataSource: myData.cloneWithRows(['list1','list2']);        };    }_renderRow = function(rowData, rowId) {    return(      <Text>{rowData + ' ' + rowId}</Text>    )}     render() {        return(            <ListView                dataSource = {this.state.dataSource}                renderRow= {(rowData, rowId) => this._renderRow(rowData, rowId)}            />        );    }}

Demo:

//@flow'use strict';import React, {Component} from 'react';import ReactNative, {AppRegistry} from 'react-native'import {    Image,    ListView,    TouchableHighlight,    StyleSheet,    TouchableOpacity,    Text,    View,} from 'react-native';var THUMB_URLS = [    require('./Thumbnails/a.png'),    require('./Thumbnails/b.png'),];var ListViewDemo = React.createClass({    getInitialState: function() {        var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});        return {            dataSource: ds.cloneWithRows(['hello1', 'hello2']),        }    },    _renderRow: function(rowData, sectionId, rowId) {        var imgSource = THUMB_URLS[rowId];        return(            <TouchableOpacity>                <View>                    <View style={styles.row}>                        <Image style={styles.thumb} source={imgSource}/>                        <Text style={{flex:1, fontSize:16, coloe:'blue'}}>                            {rowData + 'hihihihhi'}                            </Text>                            </View>                    </View>                </TouchableOpacity>        );    },    render: function() {        return(            <ListView            dataSource={this.state.dataSource}            renderRow={this._renderRow}/>                    );    }});var styles = StyleSheet.create({    row:{        flexDirection:'row',            padding:10,        justifyContent:'center',        backgroundColor:'#F6F6F6',    },    thumb: {        width:50,        height:50,    },   });AppRegistry.registerComponent('HiFang', () => ListViewDemo);

阅读全文

0 0