React Native中FlatList的使用方法

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的唯一键值。这个例子简单明了，适合作为学习和教学用途。