react native FlatList

最新推荐文章于 2025-10-30 23:18:21 发布

转载最新推荐文章于 2025-10-30 23:18:21 发布 · 331 阅读

文章标签：

#react native FlatList

移动web 同时被 3 个专栏收录

15 篇文章

订阅专栏

webapp

11 篇文章

订阅专栏

react

6 篇文章

订阅专栏

本文介绍了一个使用React Native实现的高性能列表组件示例。通过使用FlatList组件而非传统的ScrollView，可以显著提高大型列表的滚动性能。示例代码展示了如何设置状态、渲染列表项以及将数据传递给FlatList。

高性能的列表组件

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

export default class Demo08Component extends Component{
    constructor(){
        super();
        this.state={
            userList:[
                "abc1",
                "abc2",
                "abc3"
            ]
        }
    }

    showMyItem=(info)=>{
        return <Text>{info.item}{info.index}</Text>
    }

    render(){
        return <FlatList data={this.state.userList} renderItem={this.showMyItem}>

        </FlatList>
    }
}