在同一个FlatList中列出两个不同的数据,可以通过以下步骤实现:
下面是一个示例代码,演示如何在同一个FlatList中列出两个不同的数据:
import React from 'react';
import { FlatList, Text, View } from 'react-native';
const data1 = [
{ id: 1, name: 'Data 1 Item 1' },
{ id: 2, name: 'Data 1 Item 2' },
{ id: 3, name: 'Data 1 Item 3' },
];
const data2 = [
{ id: 1, name: 'Data 2 Item 1' },
{ id: 2, name: 'Data 2 Item 2' },
{ id: 3, name: 'Data 2 Item 3' },
];
const App = () => {
const renderItem = ({ item }) => (
<View>
<Text>{item.name}</Text>
</View>
);
const keyExtractor = (item) => item.id.toString();
const mergedData = data1.concat(data2);
return (
<FlatList
data={mergedData}
renderItem={renderItem}
keyExtractor={keyExtractor}
/>
);
};
export default App;
在上面的示例中,我们创建了两个数据源data1和data2,每个数据源包含三个不同的数据项。然后,我们使用concat方法将两个数据源合并为mergedData。在FlatList中,我们将mergedData作为数据源,并定义了一个渲染函数renderItem来渲染每个列表项。最后,我们使用keyExtractor将每个列表项的id属性作为唯一的key。
请注意,这只是一个示例,你可以根据自己的需求和数据结构进行调整和修改。
领取专属 10元无门槛券
手把手带您无忧上云