Question

我正在使用react-native-material-menu的{{1}}来显示菜单选项。

但是问题是，它不适用于多种情况。

我的意思是，当我单击第一个菜单按钮时，会触发相同的方法，因此每次都打开相同的菜单。

什么是处理此特定情况的更好方法？

popup

Snack Here

Answer 1

要以正确的方式处理状态，您将需要创建一个仅处理MenuItem

的新类。

以下代码将起作用：这是Snack。

import * as React from "react";
import { Text, View, StyleSheet } from "react-native";
import Constants from "expo-constants";
import { Container, Content, Card, CardItem, Body, Icon } from "native-base";
import * as Font from "expo-font";
import Menu, { MenuItem, MenuDivider } from "react-native-material-menu";
// You can import from local files
import AssetExample from "./components/AssetExample";

export default class App extends React.Component {

  onView = () => {
    alert("Do something here");
    console.log("You can do what ever you want here");
  }

  render() {
    return (
      <View style={styles.container}>
        <View style={styles.caseItem}>
          <Card style={styles.card}>
            <CardItem>
              <Body>
                <View style={styles.rowTitle}>
                  <Text style={styles.title}>John Doe</Text>
                  <CustomMenu onView={this.onView}/>
                </View>

                <View>
                  <Text style={styles.lbl}>
                    Email: <Text style={styles.lblValue}>john@yopmail.com</Text>
                  </Text>
                  <Text style={styles.lbl}>
                    Client Type: <Text style={styles.lblValue}>Individual</Text>
                  </Text>
                </View>
              </Body>
            </CardItem>
          </Card>
        </View>
        <View style={styles.caseItem}>
          <Card style={styles.card}>
            <CardItem>
              <Body>
                <View style={styles.rowTitle}>
                  <Text style={styles.title}>John Doe</Text>
                  <CustomMenu  onView={this.onView}/>
                </View>

                <View>
                  <Text style={styles.lbl}>
                    Email: <Text style={styles.lblValue}>john@yopmail.com</Text>
                  </Text>
                  <Text style={styles.lbl}>
                    Client Type: <Text style={styles.lblValue}>Individual</Text>
                  </Text>
                </View>
              </Body>
            </CardItem>
          </Card>
        </View>
        <View style={styles.caseItem}>
          <Card style={styles.card}>
            <CardItem>
              <Body>
                <View style={styles.rowTitle}>
                  <Text style={styles.title}>John Doe</Text>
                  <CustomMenu onView={this.onView} />
                </View>

                <View>
                  <Text style={styles.lbl}>
                    Email: <Text style={styles.lblValue}>john@yopmail.com</Text>
                  </Text>
                  <Text style={styles.lbl}>
                    Client Type: <Text style={styles.lblValue}>Individual</Text>
                  </Text>
                </View>
              </Body>
            </CardItem>
          </Card>
        </View>
      </View>
    );
  }
}

class CustomMenu extends React.Component {
  _menu = null;
  setMenuRef = ref => {
    this._menu = ref;
  };

  hideMenu = () => {
    this._menu.hide();
  };

  onViewClick = () => {
    const {onView} = this.props;
    onView();
    this.hideMenu();
  }

  showMenu = () => {
    this._menu.show();
  };

  render() {
    return (
      <Menu
        ref={this.setMenuRef}
        button={
          <Icon
            type="Feather"
            name="more-vertical"
            onPress={this.showMenu}
            style={{ fontSize: 20, color: "#555" }}
          />
        }
      >
        <MenuItem onPress={this.onViewClick}>View</MenuItem>
        <MenuItem onPress={this.hideMenu}>Edit</MenuItem>
        <MenuItem onPress={this.hideMenu}>Delete </MenuItem>
      </Menu>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    paddingTop: Constants.statusBarHeight,
    backgroundColor: "#ecf0f1",
    padding: 8
  },
  rowTitle: {
    flexDirection: "row",
    justifyContent: "space-between",
    width: "100%"
  },
  title: {
    fontSize: 14,
    marginBottom: 5
  },
  lbl: {
    fontSize: 11,
    color: "#000"
  },
  lblValue: {
    fontSize: 11,
    color: "#555",
    fontWeight: "normal"
  },
  caseItem: {
    marginBottom: 0
  }
});

Answer 2

由于FlatList将遍历菜单项，因此您需要维护每个可迭代菜单选项的索引。

您可以检查自己是否在item道具内传递renderItems对象。因此，您可以使用相同的item.id作为孩子（可迭代）组件的键。

由于子组件现在维护着索引，因此现在您可以通过一些方法来传递它，这将有助于您区分从子元素触发的事件。

我希望这可以让您对这个问题有所了解。

React Native中具有相同功能名称的多个组件

2 个答案: