关注我们

React Native - ListView

React Native ListView是一个视图组件，其中包含项目列表并显示在垂直可滚动列表中。创建列表视图的最小API是ListView.DataSource。它填充一个简单的数据blob数组，并使用数据源和renderRow回调实例化ListView组件。 renderRow从数据数组中获取一个Blob并返回可渲染组件。

Note: ListView组件已弃用。要实现列表组件，请使用新的列表组件FlatList或SectionList。

ListView示例1

让我们创建一个ListView组件的示例。在此示例中，我们创建一个数据源，并用数组填充它。使用该数组作为其数据源创建一个ListView组件，并将其传递到其renderRow回调中。 renderRow是一个函数，该函数返回渲染行的组件。

复制代码

import React, { Component } from 'react'
import { Text, ListView, StyleSheet } from 'react-native'

export default class MyListComponent extends Component {
    constructor() {
        super();
        const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
        this.state = {
            dataSource: ds.cloneWithRows(['Android','iOS', 'Java','Php', 'Hadoop',
                'Sap', 'Python','Ajax', 'C++',
                'Ruby', 'Rails','.Net', 'Perl']),
        };
    }

    render() {
        return (
            <ListView
                dataSource={this.state.dataSource}
                renderRow={
                    (rowData) =>
                        <Text style={{fontSize: 20}}>{rowData}</Text>}
            />
        );
    }
}

输出:

在上面的代码中，我们在构造函数中创建ListViewDataSource的实例。 ListViewDataSource是一个参数，并接受包含以下四个参数之一的参数:

getRowData(dataBlob, sectionID, rowID)
getSectionHeaderData(dataBlob, sectionID)
rowHasChanged(previousRowData, nextRowData)
sectionHeaderHasChanged(previousSectionData, nextSectionData)

ListView示例2

添加了分隔以提供单独的块并更好地显示列表项。props renderSeparator用于在ListView的items之间添加分隔符。

在Text上实现onPress props属性，以在单击列表项时执行操作。

复制代码

import React from 'react';
import { View, ListView, StyleSheet, Text,Alert} from 'react-native';

class ListViewDemo extends React.Component {
    constructor(props) {
        super(props);

        const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
        this.state = {
            dataSource: ds.cloneWithRows([ "Android",
                "iOS","Java","Swift",
                "Php","Hadoop","Sap",
                "Python","Ajax", "C++",
                "Ruby", "Rails",".Net",
                "Perl",
            ])
        };
    }
    //handling onPress action
    getListViewItem = (rowData) => {
        Alert.alert(rowData);
    }
    render() {
        return (
                <ListView
                    style={styles.container}
                    dataSource={this.state.dataSource}
                    renderRow={(rowData) =>
                       <Text style={styles.rowViewContainer}
                             onPress={this.getListViewItem.bind(this, rowData)}>{rowData}
                       </Text>
                    }
                    renderSeparator={(sectionId, rowId) =>
                        <View key={rowId} style={styles.separator} />}//adding separation
                />
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: "#e5e5e5"
    },
    separator: {
        height: 0.5, width: "100%", backgroundColor: "#000"
    },
    rowViewContainer: {
        flex: 1,
        paddingRight: 15,
        paddingTop: 13,
        paddingBottom: 13,
        borderBottomWidth: 0.5,
        borderColor: '#c9c9c9',
        flexDirection: 'row',
        alignItems: 'center',
        fontSize: 20,
        marginLeft: 10,
    },
});

export default ListViewDemo;