ListView

最新推荐文章于 2023-09-22 14:56:31 发布

原创最新推荐文章于 2023-09-22 14:56:31 发布 · 256 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍如何使用 React Native 中的 ListView 组件实现列表视图，包括数据源的配置、滚动刷新功能的添加以及列表项的渲染等核心操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    ListView,
    RefreshControl
} from 'react-native';

// 数据源
var contents = ["ROW0","ROW1","ROW2","ROW3","ROW4"];

export default class MyListView extends Component {

    constructor(props){
        super(props);
        // 复用规则
        var ds = new ListView.DataSource({rowHasChanged:(r1, r2) => r1 !== r2});

        this.state = {
            dataSource: ds.cloneWithRows(contents), // 声明变量，赋值
            isRefreshing: false
        };
    }

    render() {
        return(
            <View style={styles.container}>
                <ListView
                    dataSource={this.state.dataSource} // 设置数据源
                    renderRow={this.renderRow} // 渲染cell // 样式设置 contentContainerStyle={styles.contentViewStyle}
                    refreshControl={
                        <RefreshControl
                            refreshing = {this.state.isRefreshing}
                            onRefresh={this.onRefresha.bind(this)} // 必须要绑定-ES6中
                            tintColor="#ff0000"
                            title="Loading..."
                            titleColor="#00ff00"
                        />
                    }
                />
            </View>

        );
    }
    // 刷新
    onRefresha(){

        this.setState({isRefreshing: true});

        setTimeout(() => {
            this.setState({isRefreshing: false});
        }, 1000);
    }
    renderRow(rowData){
        return(
            <View style={styles.itemStyle}>
                <Text>
                    {rowData}
                </Text>
            </View>
        );
    }
    
}

const styles = StyleSheet.create({
    container:{
        flex:1,
        backgroundColor: 'white',
        marginTop: 20
    },
    itemStyle:{
        alignItems: 'center',
        height: 44,
        borderBottomWidth:0.5,
        borderBottomColor: '#e2e2e2',
        justifyContent: 'center'
    }
});

module.exports = MyListView;