rn 列表组件FlatList,类似qq看点新闻的布局

- 日理万妓 2021-07-24 18:42 597阅读 0赞

FlatList和ScrollView的区别
    ScrollView会一次性加载完
    
    <FlatList />
    
    属性:
        data={只支持数组类型的数据}
        
        renderItem={this.回调函数}   根据data中的数据来渲染每一行
        其中:
        回调函数的参数为item和index，且参数名必须为这两个,否则会无法加载
        
        horizontal={true}   设置水平布局,默认为竖直
        
        numColumns={n}  在非水平布局情况下,设置每行显示的列数
        
        columnWrapperStyle={
       {borderWidth:2,borderColor:'red'}}  设置每一行的样式
       
        keyExtractor={(item)=>item.aid}   给每个子元素标记唯一的key,标记了的下次就不会重新渲染
    
    上拉加载
    	(1)onEndReachedThreshold=n	决定当距离内容最底部还有多远时触发onEndReached回调。
    		此参数是一个比值0.5,表示距离内容最底部的距离为当前列表可见长度的一半时触发。
    	(2)onEndReached={({distanceFromEnd})=>{...}}
    		当列表被滚动到距离内容最底部不足onEndReachedThreshold的距离时调用。
    		
    	(3)定义下拉加载过程的加载样式
    		(1)给尾部组件返回一个自定义React元素
    			ListFooterComponent={()=>{return ...}}
    			
    		(2)返回的React元素使用ActivityIndicator活动指示器可获得加载圆圈
    			在请求数据时开启活动指示器,在结束时关闭即可
    		
    下拉刷新	
    	(1)onRefresh={()=>{...}}	
    		如果设置了此选项，则会在列表头部添加一个标准的RefreshControl控件，以便实现“下拉刷新”的功能。同时你需要正确设置refreshing属性。
    	
    	(2)refreshing=布尔值
    		当为true时,显示加载符合,false停止,触发onRefresh设置为true,得到数据设置为false
    		
    	(3)若要自定义下拉刷新展示组件(适用于FlatList、ScrollView),定义不同样式的圈圈加载器
    		(1)导入
    			import { RefreshControl } from 'react-native'
    			
    		(2)<FlatList
    				refreshControl={
    					<RefreshControl 
    						refreshing={触发显示布尔值} 
    						onRefresh={刷新回调函数} 
    						colors={['颜色数组']}
    						enabled	指定是否要启用刷新指示器。
    						progressBackgroundColor	指定刷新指示器的背景色。
    						progressViewOffset	指定刷新指示器的垂直起始位置(top offset)。
    						size	RefreshLayoutConsts.SIZE.DEFAULT, RefreshLayoutConsts.SIZE.LARGE
    						tintColor	指定刷新指示器的颜色。
    						title	指定刷新指示器下显示的文字。
    						titleColor	指定刷新指示器下显示的文字的颜色。
    					/>
        			}
    			/>
    		
    自定义头部组件/尾部组件
    	ListHeaderComponent		React元素或一个返回React元素的函数
    	ListFooterComponent		React元素或一个返回React元素的函数
    
    列表为空时渲染该组件
    	ListEmptyComponent	React元素或一个返回React元素的函数
    
    行与行之间的分隔线组件。不会出现在第一行之前和最后一行之后。
    	ItemSeparatorComponent	值为一个组件

代码示例:

import React,{ Component} from 'react'
    import { Text,View,ScrollView,StyleSheet, Alert,Dimensions,Navigator,Image,FlatList} from 'react-native'
    
    export default class App extends Component{ 
        constructor(){ 
            super();
            this.state={ 
                list:[{ aid:'1',title:'第一篇文章',thump:'./img/钢铁侠4.jpg'},
                { aid:'2',title:'第2篇文章',thump:'./img/钢铁侠4.jpg'},
                { aid:'3',title:'第3篇文章',thump:'./img/钢铁侠4.jpg'},
                { aid:'4',title:'第4篇文章',thump:'./img/钢铁侠4.jpg'},
                { aid:'5',title:'第5篇文章',thump:'./img/钢铁侠4.jpg'},
                { aid:'6',title:'第6篇文章',thump:'./img/钢铁侠4.jpg'},
                { aid:'7',title:'第7篇文章',thump:'./img/钢铁侠4.jpg'}
            ]
            }
        }
    
        render(){ 
            return(
                <>
                <View>
                    <ScrollView
                    horizontal={ true}
                    // onScroll={this.f}
                    style={ style.scroll}
                    >
                        <Text style={ style.word} >首页</Text>
                        <Text style={ style.word}>新闻</Text>
                        <Text style={ style.word}>娱乐</Text>
                        <Text style={ style.word}>游戏</Text>
                        <Text style={ style.word}>音乐</Text>
                        <Text style={ style.word}>音乐</Text>
    
                    </ScrollView>
    
                    <FlatList
                        //数据
                        data={ this.state.list}
                        //根据data中的数据来渲染每一行
                        renderItem={ this._renderItem}
                        // horizontal={true}
                        numColumns={ 2}
                        //设置每一行的样式
                        columnWrapperStyle={ { borderWidth:2,borderColor:'red'}}
                        //给每个子元素标记唯一的key,标记了的下次就不会重新渲染
                        keyExtractor={ (item)=>item.aid}
                    />
    
    
                    </View>
                </>
            )
        }
    
        f(){ 
            // console.log("22");
        }
    
        _renderItem({ item,index}){ 
            var a='./img/钢铁侠4.jpg';
             return (<View>
                <Image 
                    style={ { width:180,height:200,resizeMode:'contain'}}
                    source={ require(a)}
                />
                <Text>{ item.title}</Text>
    
             </View>)
        }
    
    }
    
    const style=StyleSheet.create({ 
        word:{ 
            fontSize:30,
            color:'rgba(0,0,0,0.5)',
            paddingLeft:10,
            lineHeight:70
    
        },
        scroll:{ 
            borderWidth:2,
            borderColor:'blue',
            borderStyle:'solid',
            height:70,
        }
    })