React Native- List Views

List Views是用于展示列表数据的，包括FlatList和SectionList。

• FlatList:不带头部的，有两个属性
  • data，需要显示的数据
  • renderItem，渲染数据，以Text组件渲染
  • 示例代码

  <FlatList
                 keyExtractor = {this._extraUniqueKey}
                 data={[
                     {item:'aaa'},
                     {item:'bbb'},
                     {item:'ccc'},
                     {item:'ddd'},
                     {item:'eee'},
                 ]}
                 renderItem={({item}) => <Text style={styles.item}>{item.item}</Text>}
  />
  

• SectionList：带头部的，有两个属性
  • sections，需要显示的数据
  • renderItem，渲染数据，以Text组件渲染
  • renderSectionHeader，头部
  • 示例代码

  <SectionList
                 keyExtractor = {this._extraUniqueKey}
                 sections={[
                     {item:'a', data:['a', 'aa', 'aaa']},
                     {item:'b', data:['b', 'bb', 'bbb']},
                     {item:'c', data:['c', 'cc', 'ccc']},
                     {item:'d', data:['d', 'dd', 'ddd']},
                     {item:'e', data:['e', 'ee', 'eee']},
                 ]}
                 renderItem={({item}) => <Text style={styles.item}>{item}</Text>}
                 renderSectionHeader={({section}) => <Text style={styles.sectionHeader}>{section.item}</Text>}
  />