在React Native中传递数组以在Flatlist中呈现,可以通过以下步骤实现:
以下是一个示例代码:
// 父组件
import React from 'react';
import { View } from 'react-native';
import ChildComponent from './ChildComponent';
const ParentComponent = () => {
const data = [
{ id: 1, name: 'Item 1' },
{ id: 2, name: 'Item 2' },
{ id: 3, name: 'Item 3' },
];
return (
<View>
<ChildComponent data={data} />
</View>
);
};
export default ParentComponent;
// 子组件
import React from 'react';
import { FlatList, Text } from 'react-native';
const ChildComponent = ({ data }) => {
const renderItem = ({ item }) => (
<Text>{item.name}</Text>
);
return (
<FlatList
data={data}
renderItem={renderItem}
keyExtractor={(item) => item.id.toString()}
/>
);
};
export default ChildComponent;
在上述示例中,父组件创建了一个包含三个对象的数组,并将其作为props传递给子组件。子组件接收到数组后,使用Flatlist组件来渲染数组中的数据。在渲染函数中,使用item.name来展示每个数组元素的名称。
腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云