多项数据。使用 react-native 在动态模式中显示点击的数据

Question

FOOD> PIZZA> 点击任意披萨打开模式。我想显示在此模式中单击的比萨饼的信息。我看了很多类似的例子，但我无法摆脱它。所以我需要帮助。我在下面添加了部分代码。同时代码在expo和下方link

中可用

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>

Answer 1

其中一种方式可以是：

1)创建新状态

currentChildData:[],
currentParentData:[],

2)在onPress事件中传递parent id和child index

 <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

Answer 2

您错过了 ListItem 组件中映射数组的键。将其添加为道具 key={Index} 。您还需要地图中的项目作为您的 onPress 中的参数，因为您需要将 visited/selected 元素推送到状态。 {()=>this.openModal(itemFromMap)} 然后你可以像你需要的那样处理数据。据我所知，你有一系列的对象。 Object.keys(itemFromMap).map(... 并将 return 数据添加到您的 modalInnerContainer 的所需部分。

多项数据。使用 react-native 在动态模式中显示点击的数据

Multiple item data. Show the data as clicked in the dynamically modal with react-native

react-native

expo

react-native-modal