如何在react native中使用函数组件将嵌套的json数据呈现为flatlist

Question

这是我使用的json数据

const餐厅数据=[｛

"BeveragesData": [

{
id: 1,
title: 'Thick Shake Factory',
price: 210,
Image: require('../../assests/images/thickchake.jpg'),
},
{
id: 2,
title: 'Thick Shake Factory',
price: 120,
Image: require('../../assests/images/thickchake.jpg'),
},
{
id: 3,
title: 'Juice Point',
price: 180,
Image: require('../../assests/images/juicepoint.jpg'),
},
{
id: 4,
title: 'Juice Point',
price: 320,
Image: require('../../assests/images/juicepoint.jpg'),
},

],
"DesertsData": [
{
id: 1,
title: 'Deserts Shop',
price: 120,
Image: require('../../assests/images/desert1.jpg'),
},
{
id: 2,
title: 'Cool Deserts',
price: 100,
Image: require('../../assests/images/desert2.jpg'),
},
{
id: 3,
title: 'Paradise',
price: 80,
Image: require('../../assests/images/paradise.png'),
},
{
id: 4,
title: 'Juice Point',
price: 154,
Image: require('../../assests/images/desert2.jpg'),

},

]
} ] export default RestaurantsData;

这是我的代码

import React from "react"; import { Text, Image, TouchableOpacity,
> StyleSheet, View, FlatList, ImageBackground } from 'react-native';
> import RestaurantsData from '../screens/Data/data';
> 
> const Restaurant = (props) => {
>     const Data = props.route.params
>     const renderItem = ({ item }) => {
>         return (
>             <View style={styles.flatlist}>
>                 <Image source={item.Image} style={styles.flatlistimage} />
>                 <TouchableOpacity >
>                     <Text style={{ fontSize: 20, color: 'black', fontWeight: 'bold' }}>{item.title}</Text>
>                 </TouchableOpacity>
>             </View>
>         )
>     }
>     return (
>         <View style={styles.container}>
>             <FlatList
>                 data={RestaurantsData }
>                 renderItem={renderItem}
>                 keyExtractor={item => item.id}
>             />
>         </View>
>     ) }
> 
> export default Restaurant;

Answer 1

您没有提供足够的信息，比如您希望如何构建JSX。但这就是渲染嵌套数据的方法。

示例：

<View style={styles.container}>
<FlatList
data={RestaurantsData}
renderItem={({ item }) => {
return (
<>
{item.BeveragesData.map((secItem) => (
<View key={secItem.id}>
<Text>{secItem.title}</Text> <Text>{secItem.price}</Text>
</View>
))}
{item.DesertsData.map((secItem) => (
<View key={secItem.id}>
<Text>{secItem.title}</Text> <Text>{secItem.price}</Text>{" "}
</View>
))}
</>
);
}}
/>
</View>;