React Native ListView

17 Mar 2025 | 阅读 2 分钟

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

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

React Native ListView 示例 1

让我们创建一个 ListView 组件的例子。在此示例中，我们创建一个数据源，并用一个数据 blob 数组填充它。使用该数组作为其数据源创建一个 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 项目执行操作

添加分隔是为了提供一个单独的块，并更好地显示列表项。 props renderSeparator 用于在 ListView 的项目（数据）之间添加分隔符。

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

输出

下一个主题React Native FlatList

← 上一个下一个 →

React Native ListView

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