FlatList的簡述

簡單的栗子

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

• data里塞數(shù)據(jù)，其實(shí)就是一個(gè)數(shù)組，數(shù)組里每個(gè)元素就是個(gè)字典
• renderItem塞的是View，傳遞的數(shù)據(jù)用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，塞的是數(shù)據(jù)，其實(shí)也是個(gè)數(shù)組，數(shù)組里每個(gè)元素是個(gè)字典，該字典必須有data、title、key，而data就是FlatList里的data，果然是首尾呼應(yīng)，看來是一個(gè)人寫的代碼，??
• renderItem用來渲染每個(gè)cell
• renderSectionHeader用來渲染每個(gè)header
• 最終效果是這樣：

image.png