React Native - FlatList

React Native - FlatList 首页 / React Native入门教程 / React Native - FlatList

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

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

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

FlatList示例

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

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

链接:https://www.learnfk.comhttps://www.learnfk.com/react-native/react-native-flatlist.html

来源:LearnFk无涯教程网

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);

输出:

React Native FlatListReact Native FlatList

祝学习愉快!(内容编辑有误?请选中要编辑内容 -> 右键 -> 修改 -> 提交!)

技术教程推荐

邱岳的产品手记 -〔邱岳〕

程序员进阶攻略 -〔胡峰〕

算法面试通关40讲 -〔覃超〕

从0开始学大数据 -〔李智慧〕

Node.js开发实战 -〔杨浩〕

Linux内核技术实战课 -〔邵亚方〕

搞定音频技术 -〔冯建元 〕

中间件核心技术与实战 -〔丁威〕

计算机基础实战课 -〔彭东〕

好记忆不如烂笔头。留下您的足迹吧 :)