React Native中FlatList的使用方法

作者：System 时间：2024年08月16日分类：所有,react native 字数：810

这篇文章距离上次修改已过231天，其中的内容可能已经有所变动。

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

export default class MyFlatList extends Component {
  render() {
    const data = [
      { key: 'a', name: 'Alice' },
      { key: 'b', name: 'Bob' },
      { key: 'c', name: 'Charlie' }
    ];

    renderItem = ({ item }) => (
      <View style={{ height: 50, backgroundColor: 'green' }}>
        <Text style={{ color: 'white' }}>{item.name}</Text>
      </View>
    );

    return (
      <FlatList
        data={data}
        renderItem={this.renderItem}
        keyExtractor={item => item.key}
      />
    );
  }
}

这段代码展示了如何在React Native应用中使用FlatList组件来渲染一个简单的列表。data数组提供了列表的数据，renderItem函数定义了每个列表项的渲染方式，keyExtractor函数用于提取列表中每个item的唯一键值。这个例子简单明了，适合作为学习和教学用途。

React Native中FlatList的使用方法

评论已关闭

推荐阅读