React Native之SectionList使用扩展-九宫格

实现九宫格的几种方式(两种)

1.通过设置SectionList的contentContainerStyle属性实现

实现思路说明如下

a.添加contentContainerStyle属性样式

contentContainerStyle={
// 主轴方向横向显示，所有内容横向显示
flexDirection:'row',
// 设置此属性为了一行显示不下,换一行
flexWrap:'wrap',}

b.设置section分组头视图宽度等于屏幕宽度（width:Dimensions.get("window").width}）

_renderSectionHeader=(item)=>{
        return  (
                    
                        {item.section.title}
                    
                );
    }

c.设置分组下内容横向显示3条（width:Dimensions.get("window").width/3）

 _renderItem=(info)=>{
        //如果title为undefined(解决空数据section之间不显示的问题)
        if(info.item.title == undefined){
            return();
        }else{
            return (
                
                
                    {info.item.title}
                
            
        );
        }
    }

d.定义SectionList组件

render(){
        return(
            
                
            
        );
    }

e.显示效果如下：

（缺点：有警告 flex-wrap is not support with the virtualizedlist. 目前github issues未解决）

2.SectionList和FlatList结合使用实现九宫格

a.Section的renderItem属性返回空视图；

b.将FlatList和header一起放到Section中，FlatList的numColumns设置显示列数；

c.FlatList显示Section下的每条分组内容；

_flatRenderItem({item,index}){
        if(item.title == undefined){
            return ;
        }
        return (
                
                
                    {item.title}
                
            
        );
    }

    _renderItem=(info)=>{
        return  ();
    }


    _renderSectionHeader=(item)=>{
        return(
            
                
                    
                        {item.section.title}
                    
                
                 item.key}
                    numColumns={3}
                />
            
        );
    }


    render(){
        return(
            
                
            
        );
    }

 

参考：

https://www.jianshu.com/p/d040050cfaca