React Native -- ListView的基本用法

最新推荐文章于 2019-07-23 12:07:09 发布

lixuce1234

最新推荐文章于 2019-07-23 12:07:09 发布

阅读量295

点赞数

分类专栏： React—Native 安卓开发

本文链接：https://blog.csdn.net/lixuce1234/article/details/74910032

版权

安卓开发同时被 2 个专栏收录

121 篇文章 1 订阅

订阅专栏

React—Native

12 篇文章 1 订阅

订阅专栏

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);