React Native- List Views

List Views是用于展示列表数据的,包括FlatListSectionList

  • 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>}
    />
    
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容