FlatList的简述

简单的栗子

<FlatList
  data={
    [{key: 'a'}, {key: 'b'}, {key: 'c'}, {key: 'd'}]
  }
  renderItem={
    ({item}) => <Text>{item.key}</Text>
  }
/>

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

image.png

SectionList的简述

简单的栗子

<SectionList
    renderItem={
      ({item}) => <Text style={{color: 'black', padding: 10}}>{item.key}</Text>
    }
    renderSectionHeader={
      ({section}) => <Text style={{color: 'green', padding: 10}}>{section.title}</Text>
    }
    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