rn ant的ListView组件实现FlatList

曾经终败给现在 2021-07-24 14:37 375阅读 0赞

引入	
    	import { ListView } from '@ant-design/react-native';
    
    用处:
    	列表页,可以实现qq看点的效果,可以分列显示,触底后自动做ajax获取等刷新请求
    
    
    语法：
    
       <ListView 
                // //内容获取,回调函数有固定格式
                onFetch={this.onFetch}
    			
    			//唯一标识
                keyExtractor={(item,index)=>{
                    return index
                }}
                
                //在回调函数中返回渲染的组件,回调函数的第一个参数item是onFetch函数中rowData数组内的一个元素,会自动遍历
                renderItem={this.renderItem}
                
                //分成几列显示
                numColumns={2}
            />
            
            //导出说明
            export const title = 'ListView';
    		export const description = 'ListView Example';
            
    回调设置
    	onFetch: 做数据获取等操作
    	
    		async(page,startFetch,abortFetch) => 
    		{
    			try{
    				ajax操作,将获取的数据放进数组里
    				startFetch(数组类型的数据,分页数值(暂时未发现其功能));  //数据获取
    				
    			}catch(err){
    				abortFetch(); //异常终止
    			}
    		}
    		
    	renderItem: 根据onFetch中数组的内容,渲染每一条数据并返回
    		
    		(item,index)=>{ //第一个参数是数组中的一个元素
    			...
    			return (组件)
    		
    		}

代码示例:

import React,{ Component} from 'react'
    import { Text,View,StyleSheet,Button,Image,TouchableOpacity} from 'react-native'
    import {  ListView } from '@ant-design/react-native';
    //导入自适应单位
    import pxSize from '../../assets/js/pxSize'
    
    export default class App extends Component{ 
        state={ 
            layout:'list',
            imgPath:'http://10.0.2.2:3000/img/bookimg/'
        };
    
        //ajax函数
        onFetch = async (page = 1,startFetch,abortFetch) => { 
            try { 
              let pageLimit = 5;
              let rowData = []
              let httpUrl = `http://10.0.2.2:3000/indexList?page=${ page}`
              let res = await fetch(httpUrl)
              rowData = await res.json()
              startFetch(rowData,pageLimit);
              
            } catch (err) { 
              abortFetch(); //manually stop the refresh or pagination if it encounters network error
            }
            
          };
          
    
    
        //返回便利的元素
        renderItem=(item)=>{ 
            //express下assets中的静态资源，因为设置了静态资源"http://127.0.0.1:3000/"就相当于./assets
            let url="http://10.0.2.2:3000/img/bookimg/"+item.imgInfo.imgid+'.jpg';
            console.log(url);
            //为点击封面去到详情页做准备
            let { navigation} = this.props;
    
            return (
                <TouchableOpacity onPress={ ()=>{ navigation.navigate("BriefPage",{ book:item})}} style={ { marginTop:20, 
                flex:1,
                alignItems:"center",
                justifyContent:'center'
        }}>
                    <View style={ { alignItems:"center",justifyContent:'center'}}>
                        <Image style={ { width:pxSize(300),height:pxSize(400),resizeMode:"contain",}}  source={ { uri:url}}/>
                        <View style={ { width:'100%',paddingRight:10, alignItems:"center",justifyContent:'center'}}>
                            <Text>{ item.bookTitle}</Text>
                            <Text
                             ellipsizeMode="tail"
                             numberOfLines={ 1}
                             style={ { paddingLeft:12}}
                            >{ item.brief}</Text>
                        </View>
                    </View>
                </TouchableOpacity>
            )
    
        }
          
    
        render()
        { 
            return(
                <>
                    <ListView 
                        // //内容获取,回调函数有固定格式
                        onFetch={ this.onFetch}
                        keyExtractor={ (item,index)=>{ 
                            return index
                        }}
                        //在回调函数中返回每一条组件,回调函数的第一个参数item是onFetch函数中rowData数组内的一个元素,会自动遍历
                        renderItem={ this.renderItem}
                        //分成几列
                        numColumns={ 2}
    
                    />
    
                
                </>
            )
        }
    }
    
    const styles=StyleSheet.create({ 
    
    })
    
    
    export const title = 'ListView';
    export const description = 'ListView Example';