关注我们

React Native - FlatList

FlatList组件在可滚动列表中显示相似的结构化数据。它适用于大型数据列表，其中列表项的数量可能会随时间变化。 FlatList仅显示屏幕上当前正在显示的那些渲染元素，而不是一次显示列表中的所有元素。

FlatList组件需要两个必需的道具：data和renderItem。

为了实现FlatList组件，我们需要从“ react-native”库中导入FlatList。

FlatList示例

在此示例中，我们为data prop属性提供了编码元素。data props中的每个元素都呈现为Text组件。

FlatList的ItemSeparatorComponent属性用于实现列表元素之间的分隔符。为了对列表项执行click事件，我们使用onPress属性来支持Text。

复制代码

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

export default class FlatListBasics extends Component {

    renderSeparator = () => {
        return (
            <View
                style={{
                    height: 1,
                    width: "100%",
                    backgroundColor: "#000",
                }}
            />
        );
    };
    //处理 onPress 动作
    getListViewItem = (item) => {
        Alert.alert(item.key);
    }

    render() {
        return (
            <View style={styles.container}>
                <FlatList
                    data={[
                        {key: 'Android'},{key: 'iOS'}, {key: 'Java'},{key: 'Swift'},
                        {key: 'Php'},{key: 'Hadoop'},{key: 'Sap'},
                        {key: 'Python'},{key: 'Ajax'}, {key: 'C++'},
                        {key: 'Ruby'},{key: 'Rails'},{key: '.Net'},
                        {key: 'Perl'},{key: 'Sap'},{key: 'Python'},
                        {key: 'Ajax'}, {key: 'C++'},{key: 'Ruby'},
                        {key: 'Rails'},{key: '.Net'},{key: 'Perl'}
                    ]}
                    renderItem={({item}) =>
                        <Text style={styles.item}
                              onPress={this.getListViewItem.bind(this, item)}>{item.key}</Text>}
                    ItemSeparatorComponent={this.renderSeparator}
                />
            </View>
        );
    }
}

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


AppRegistry.registerComponent('AwesomeProject', () => FlatListBasics);