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

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

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