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

mayundoyouknow

于 2019-05-17 15:56:10 发布

阅读量1.2k

点赞数

分类专栏： React Native 文章标签： SectionList 九宫格

本文链接：https://blog.youkuaiyun.com/ahou2468/article/details/90292842

版权

本文介绍了使用React Native的SectionList和FlatList结合来实现九宫格布局的方法。首先，尝试通过设置SectionList的contentContainerStyle属性，但存在警告问题。然后，采用SectionList的renderItem返回空视图，并在Section内嵌套FlatList，通过设置FlatList的numColumns达到九宫格效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

实现思路说明如下

a.添加contentContainerStyle属性样式

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

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

_renderSectionHeader=(item)=>{
        return  (<TouchableOpacity style={
  {height:40,backgroundColor:item.section.show?'blue':'gray',justifyContent:'center',
                    width:Dimensions.get("window").width}} onPress={this.handlerSectionHeader.bind(this, item)}>
                    <Text style={
  {color:'red'}}>
                        {item.section.title}
                    </Text>
                </TouchableOpacity>);
    }

c.设置分组下内容横向显示3条（width