React-Native的FlatList和SectionList

FlatList的简述

简单的栗子

 {item.key}
  }
/>

• data里塞数据，其实就是一个数组，数组里每个元素就是个字典
• renderItem塞的是View，传递的数据用item表示
• 最终效果是这样：

image.png

SectionList的简述

简单的栗子

 {item.key}
    }
    renderSectionHeader={
      ({section}) => {section.title}
    }
    sections={
      [ // 不同section渲染相同类型的子组件
        {data: [{key: 'Will'}, {key: 'Javion'}, {key: 'Cater'}], title: 'title1', key:'title1'},
        {data: [{key: 'Will'}, {key: 'Javion'}, {key: 'Cater'}], title: 'title2', key:'title2'},
        {data: [{key: 'Will'}, {key: 'Javion'}, {key: 'Cater'}], title: 'title3', key:'title3'},
      ]
    }
/>

• sections类似于FlatList里的data，塞的是数据，其实也是个数组，数组里每个元素是个字典，该字典必须有data、title、key，而data就是FlatList里的data，果然是首尾呼应，看来是一个人写的代码，
• renderItem用来渲染每个cell
• renderSectionHeader用来渲染每个header
• 最终效果是这样：

image.png