关于SectionList组件实现九宫格样式

针对SectionList组件的实现九宫格样式，效果图：

效果图.png

普遍：

{
"list": [
    {
      "title" : "童声童梦",
      "loc" : 0,
      "data": [
          {"icon":"gushihui", "title":"故事汇", "type":0},
          {"icon":"huiben", "title":"绘本", "type":1},
          {"icon":"gequ", "title":"歌曲", "type":2}
      ]
    },
  ]
}

修改后的结构：

{
    "list": [
        {
          "title" : "童声童梦",
          "loc" : 0,
          "data": [
              [
                {"icon":"gushihui", "title":"故事汇", "type":0},
                {"icon":"huiben", "title":"绘本", "type":1},
                {"icon":"gequ", "title":"歌曲", "type":2}
              ]
          ]
        },
    ]
 }

**注意在data中多加了一个数组来包裹。

SectionList

代码1.png

头部

代码2.png

item

image.png image.png

利用map遍历， 获取每个 { } 对象（cell）
修改布局为 row 样式，设置超出范围 换行属性。