React Native 列表组件基础知识

import React from 'react';
import { FlatList, Text, View } from 'react-native';
 
export default class MyFlatList extends React.Component {
  render() {
    return ( // 使用FlatList组件渲染数据列表
      <FlatList
        data={this.props.data} // 数据源
        keyExtractor={(item, index) => item.id} // 为每项指定唯一的key
        renderItem={({ item }) => ( // 渲染每一项
          <View style={{ height: 50, backgroundColor: 'cyan' }}>
            <Text style={{ padding: 10 }}>{item.title}</Text>
          </View>
        )}
      />
    );
  }
}
 
// 使用示例
const data = [
  { id: '1', title: 'Item 1' },
  { id: '2', title: 'Item 2' },
  // ...更多数据
];
 
// 在其他组件中
// <MyFlatList data={data} />

这段代码定义了一个名为MyFlatList的React组件，它接收一个data属性作为数据源，并使用FlatList组件来渲染一个简单的项目列表。每个列表项都有一个独特的key，并且可以通过renderItem属性自定义渲染样式。这是学习React Native列表组件的一个基础例子。