多项数据。使用 react-native 在动态模式中显示单击的数据
Posted
技术标签:
【中文标题】多项数据。使用 react-native 在动态模式中显示单击的数据【英文标题】：Multiple item data. Show the data as clicked in the dynamically modal with react-native 【发布时间】：2020-05-19 03:58:01 【问题描述】：FOOD> PIZZA> 点击任何披萨会打开一个模式。我想显示在此模式中单击的比萨饼的信息。我看了很多类似的例子，但我无法摆脱它。所以我需要帮助。我在下面添加了部分代码。同时，代码在expo和下面的链接中都可以找到
snack.expo.io/@ibrahimyolbir/e48b05
手风琴
<Accordion
dataArray=this.state.menus
animation=true
expanded=true
renderHeader=this._renderHeader
renderContent=this._renderContent
/>
我在渲染内容中的打开模式按钮
onPress=this.triggerModal(food)
_renderContent = (item) =>
return (
<List>
item.food.map((food, index) =>
return (
<ListItem style=
backgroundColor: "#f0f0f5",
padding: 10,
marginLeft: 0,
paddingRight: 10,
fontStyle: "italic",
listStyleType: "none",
flexDirection: "row",
justifyContent: "space-between"
>
<TouchableOpacity
onPress=this.triggerModal(food)
style=
flexDirection: "row",
justifyContent: "space-between"
>
<Left style=
maxWidth: 57
>
<Thumbnail source=require("../assets/images/left-food-icon.png") />
</Left>
<Body>
<Text >food.name</Text>
<Text note >food.description</Text>
</Body>
<Right>
<Text >food.price :-</Text>
</Right>
</TouchableOpacity>
</ListItem>
)
)
</List>
);
模态
<Modal
style= marginTop: 122
isVisible=this.state.display
visible=this.state.display
onSwipeComplete=() => this.setState( isVisible: false )
onSwipeThreshold=1
swipeDirection="down"
animationType="slide"
onRequestClose=() =>
Alert.alert('Modal has been closed.');
>
<View style= flex: 1, backgroundColor: "#fff" >
<Text>Hello!</Text>
<TouchableOpacity onPress=this.closeDisplay style= marginTop: 40, marginLeft: 150 >
<Text> CLOSE MODAL </Text>
</TouchableOpacity>
/* <Text> this.state.menus </Text> */
</View>
</Modal>
【问题讨论】：
请分享 xpo 链接？ 我不知道为什么，但是模态在博览会中不起作用，但您可以看到所有代码。Screens>foodjs> snack.expo.io/@ibrahimyolbir/b82615 @GauravRoy 你打开页面了吗？ 给我 15 分钟 嗨@GauravRoy我改变了代码你可以在这里看到最新的代码如果你有时间谢谢。 snack.expo.io/@ibrahimyolbir/e48b05 【参考方案1】：你错过了 ListItem 组件中映射数组的键。将其添加为道具 key=Index 。
您还需要地图中的项目作为您的 onPress 中的参数，因为您需要将访问/选择的元素推送到状态。 ()=>this.openModal(itemFromMap)
然后您可以使用您需要的数据进行操作。
据我所知，您有一系列对象。 Object.keys(itemFromMap).map(...
并将数据返回到 modalInnerContainer 所需的部分。
【讨论】：
嗨丹尼斯！我按照你说的做了，但如果你解释我接下来要做什么，我会很高兴 现在它的数据即将到来但不需要的数据你可以在这里查看我的代码snack.expo.io/@ibrahimyolbir/e48b05。屏幕>FoodScreensjs 和 .我有我的 jsondata 和查看食物屏幕的屏幕截图 不。现在的问题是；它首先将父级作为索引。在我传入的数据中，菜单中有食物类别，下面是食物类型。我想在模态中显示食物类型（前类的子类：PIZZA 是一个类别，而 Margherita 是 PIZZA 的子类）信息 我刚刚更新了我的答案。试着让我知道它是否能解决问题。【参考方案2】：其中一种方法可以是：
1)创建新状态
currentChildData:[],
currentParentData:[],
2)在 onPress 事件中传递父 id 和子索引
<TouchableOpacity onPress=()=>this.triggerModal(item.id,index)
3）使用传递的索引和父ID，我们可以从菜单状态中提取有关（被点击的项目）的相关信息
triggerModal = (ParentIndex,childIndex) =>
this.setState(prevState =>
let ParentData=[...prevState.menus].find(each=>each.id==ParentIndex)
return
display: true,
currentChildData: ParentData.food[childIndex],
currentParentData: ParentData,
);
4) 现在我们的状态中有（要点击的项目）的信息。然后我们可以在 Modal 中使用它（如下所示的项目名称）
<Text>this.state.currentChildData.name</Text>
工作代码：https://snack.expo.io/By_QVbPMI
【讨论】：
嗨，迪佩什！非常感谢您的帮助。我按照你写的应用它。但它每次都带来错误的ID。我在上面添加了新图像 1. json 数据文件的视图 2. 食物屏幕 现在一切正常，只是现在有一个问题是类别（父母）的信息。我需要孩子的信息。 “id”：“94905070-bc1d-11e9-b1f7-61a58a76a9a8”，“名称”：“PIZZA”，“食物”：[ “id”：“61a58a76a9a82”，“名称”：“Margherita”，“价格”： "89", "description": "番茄、马苏里拉奶酪、帕尔马干酪" , 你现在最新的代码是什么。提供展览链接。 这里是最新的代码snack.expo.io/@ibrahimyolbir/e48b05。我明白是什么问题。它首先将父级作为索引。在我传入的数据中，菜单中有食物类别，其下方是食物类型。"menus": ["id": "1","name": "PIZZA","food": [ "id ": "61a58a76a9a82","name": "Margherita","price": "89", "description": "Tomatsås, mozzarella, parmesanost"，这里我需要取父母的食物类型索引然后得到孩子的 所以问题解决了吗？以上是关于多项数据。使用 react-native 在动态模式中显示单击的数据的主要内容，如果未能解决你的问题，请参考以下文章
如何在组件 React / React-native 的单独页面中使用动态 graphql（字符串）