React Native - 10 - 列表视图

React Native提供了一套用于呈现数据列表的组件。一般来说，你会想要使用FlatList或SectionList。

FlatList组件显示一个不断变化的但是结构相似的数据的滚动列表。 FlatList适用于很长的数据列表，其中项目的数量可能随时间而改变。与更普通的ScrollView不同，FlatList只渲染当前在屏幕上显示的元素，而不是一次渲染所有元素。

FlatList组件需要两个属性：data和renderItem。数据是列表信息的来源。 renderItem从源获取一个项目并返回一个格式化的组件来渲染。

这个例子创建了一个简单的硬编码数据FlatList。数据属性中的每个项目都呈现为文本组件。 FlatListBasics组件然后呈现FlatList和所有文本组件。

import React, { Component } from 'react';
import { FlatList, StyleSheet, Text, View } from 'react-native';

export default class FlatListBasics extends Component {
    render() {
        return (
            <View style={styles.container}>
                <FlatList
                    data={[
                        {key: 'Devin'},
                        {key: 'Jackson'},
                        {key: 'James'},
                        {key: 'Joel'},
                        {key: 'John'},
                        {key: 'Jillian'},
                        {key: 'Jimmy'},
                        {key: 'Julie'},
                    ]}
                    renderItem={({item}) => <Text style={styles.item}>{item.key}</Text>}
                />
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        paddingTop: 22
    },
    item: {
        padding: 10,
        fontSize: 18,
        height: 44,
    },
})

image.png

如果要将一组数据渲染为逻辑部分（可能是部分标题，类似于iOS上的UITableView），则需要使用SectionList。

import React, { Component } from 'react';
import { SectionList, StyleSheet, Text, View } from 'react-native';

export default class SectionListBasics extends Component {
    render() {
        return (
            <View style={styles.container}>
                <SectionList
                sections={[
                    {title: 'D', data: ['Devin']},
                    {title: 'J', data: ['Jackson', 'James', 'Jillian', 'Jimmy', 'Joel', 'John', 'Julie']},
                ]}
                renderItem={({item}) => <Text style={styles.item}>{item}</Text>}
                renderSectionHeader={({section}) => <Text style={styles.sectionHeader}>{section.title}</Text>}
                keyExtractor={(item, index) => index}
                />
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        paddingTop: 22
    },
    sectionHeader: {
        paddingTop: 2,
        paddingLeft: 10,
        paddingRight: 10,
        paddingBottom: 2,
        fontSize: 14,
        fontWeight: 'bold',
        backgroundColor: 'rgba(247,247,247,1.0)',
    },
    item: {
        padding: 10,
        fontSize: 18,
        height: 44,
    },
})

image.png