FlatList列表组件的使用

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', } })