ListView

来源：互联网发布：古建筑建模软件编辑：程序博客网时间：2024/06/05 07:06
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;
0 0