FlatList列表组件的使用

Posted 2021-02-21 itgezhu

PaymentChannelScreen.js

/**
 *Created by lixingru on 2020/4/14
 */
import React, { Component, PureComponent } from ‘react‘;
import {
    StyleSheet,
    Text,
    Image,
    View,
    ScrollView,
    FlatList,
    TouchableOpacity,
    Dimensions
} from ‘react-native‘;
import {Cruserinfo} from "../child/ChargeRecordView"
import LoadingView from "../../../../component/Loading";
import * as api from "../../../../networking/Api";

//绑定银行卡列表
class PaymentChannelItemView extends Component {
    _onPress = ()=>{
        const { ChannelItem ,navigation} = this.props
        navigation.navigate(‘selectBank‘,{ data: {
            ChannelItem:ChannelItem,
            customerId:this.props.navigation.state.params.data.customer_id,
            nameAndIdCard:this.props.navigation.state.params.data,
            phoneNumber:this.props.navigation.state.params.data.phoneNumber

        }})
    }

    render() {
        const { channelPayName } = this.props.ChannelItem
        return (
            <View style={styles.Channel}>
                <TouchableOpacity style={styles.ChannelItem} onPress={this._onPress}>
                    <Text style={{fontSize:18}}>{channelPayName}</Text>
                </TouchableOpacity>
            </View>
        )
    }
}

const windowHeight = Dimensions.get(‘window‘).height;
export default class PaymentChannelScreen extends Component {
    constructor() {
        super(...arguments)
        this.state = {
            isLoading:false,
            data: []
        }
    }

    componentDidMount(){
        //一进入页面请求数据并展示列表
        this.fetchData()      
        console.log(‘+_+_+_:‘,this.props.navigation.state.params)
    }

    //渲染列表子项
    _renderItem = ({ item, index }) => {
        return ( 
            <PaymentChannelItemView navigation={this.props.navigation} 
            ChannelItem={item}></PaymentChannelItemView>
        )
    }

    // 刷新数据
    fetchData = async () => {
        // 开始请求数据时显示加载控件
        this.setState({
            isLoading: true,
        })
        const userId =  await EDMoney.getUserId()
        api.selectAllCapitalChannel(userId)
        .then((res) => {
            //请求成功后刷新数据
            this.setState({
                data: res.data,
            })
            //请求成功0.4秒后,刷新控件消失
            setTimeout(()=>{
                this.setState({
                    isLoading: false,
                })
            },400); 
        })
        .catch((error) => {
            //请求失败0.4秒后,刷新控件消失
            setTimeout(()=>{
                this.setState({
                    isLoading: false,
                })
            },400); 
            if (error.errors) {
                EDMoney.Toast.show(error.errors._error)
            } else {
                EDMoney.Toast.show(‘网络错误‘)
            }
        })
    }

    /*没有数据时显示的组件*/
    listEmptyComponent() {
        return <View style={{backgroundColor: ‘#fff‘, flex: 1,height:windowHeight}}>
                    <Text style={{
                        alignItems: ‘center‘,
                        textAlign: ‘center‘,
                        color: ‘#e6e6e6‘,
                        fontSize:18,
                        lineHeight:windowHeight-75
                    }}
                    >
                    暂无授权信息
            </Text>
        </View>
    }
    render() {
        return (
            <View style={styles.root}>
                <View style={styles.list}>
                    <FlatList
                            data={this.state.data}
                            extraData={this.state}
                            initialNumToRender={10}
                            keyExtractor={(item, index) => item.key}
                            renderItem={this._renderItem}
                            ListEmptyComponent={this.listEmptyComponent} // 没有数据时显示的界面
                            refreshing={this.state.isLoading}// 是否刷新 ，属自带刷新控件,refreshing值为true时显示刷新控件
                            onRefresh={()=>{this.fetchData()}}// 刷新方法,写了此方法，下拉才会出现  刷新控件，使用此方法必须写 refreshing
                            // ListFooterComponent={this._renderFooter()}
                        />
                </View>
            </View>
        )
    }
}



const styles = StyleSheet.create({
    root:{
        flex: 1,
        backgroundColor:‘#f0f0f0‘
    },
    list:{
        flex: 1,
    },
    Channel:{
        borderTopWidth:1,
        borderTopColor:‘#e6e6e6‘,
        marginBottom: 6
    },
    ChannelItem:{
        height:60,
        backgroundColor:‘#fff‘,
        paddingLeft:10,
        borderBottomWidth:1,
        borderBottomColor:‘#e6e6e6‘,
        borderStyle:‘solid‘,
        justifyContent: ‘center‘,
        alignItems: ‘center‘,
        
    }
})