如何使用函数组件将嵌套的json数据呈现为平面列表中的本机响应
，这是我正在使用的json数据
const RestaurantsData ={
“require('../../assests/images/thickchake.jpg')，”：{ id: 1，标题：‘厚摇工厂’，价格: 210，图像:BeveragesData }，{ id: 2，标题：‘厚抖动工厂’，价格: 120，图片: require('../../assests/images/thickchake.jpg')，}，{ id: 3，标题：‘果汁点’，价格: 180，图像: require('../../assests/images/juicepoint.jpg')，}，{ id: 4，标题：‘果汁点’，价格: 320，图像: require('../../assests/images/juicepoint.jpg')，}，"DesertsData"：{ id: 1，标题：‘沙漠商店’，价格: 120，图像:require(‘.././assests/Image/荒漠化1.jpg’)，}，{ id: 2，标题：‘酷沙漠’，价格: 100，图像:要求(‘././资产/图像/荒漠化2.jpg’)，}，{ id: 3，标题：‘天堂’，价格: 80，图像:要求(‘.././资产师/图像/天堂.154’)，}，{ id: 4，标题：‘果汁点’，价格: 154，图像:要求(‘././资产师/图像/沙漠2.jpg’)，}，[}]导出默认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;回答 1
Stack Overflow用户
发布于 2022-09-05 08:01:27
您没有提供足够的信息，比如您希望如何构造您的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>;https://stackoverflow.com/questions/73605888
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号