ReactNative中使用FlatList

在React Native中使用FlatList组件可以高效地渲染大量数据。以下是一个简单的例子，展示如何使用FlatList来渲染一个简单的列表：

import React from 'react';
import { FlatList, Text, View } from 'react-native';
 
const data = Array.from({ length: 100 }).map((_, index) => ({ id: index, title: `Item ${index}` }));
 
const Item = ({ title }) => (
  <View style={{ height: 50, backgroundColor: '#f9f9f9', justifyContent: 'center', borderBottomWidth: 1, borderColor: '#eee' }}>
    <Text style={{ paddingLeft: 15, fontSize: 16 }}>{title}</Text>
  </View>
);
 
const App = () => (
  <FlatList
    data={data}
    keyExtractor={item => item.id.toString()}
    renderItem={({ item }) => <Item title={item.title} />}
  />
);
 
export default App;

在这个例子中，我们创建了一个包含100个条目的数据数组data，然后定义了一个Item组件来渲染每一个条目。在App组件中，我们使用FlatList来渲染这些条目，keyExtractor函数为每个条目提供一个唯一的键，renderItem则定义了如何渲染每个条目。这样，我们就可以高效地显示一个可滚动的列表。