react-native - 更多图标没有被点击

Question

您好，我使用垂直 3 点图标作为更多按钮。当我点击图标时，弹出窗口不会出现，但是当我点击图标外的容器时，弹出窗口就会出现。我在做什么错？

下面是我正在使用的代码：

 {filteredlist ? 
                        (<View style={{ borderRadius: 4, borderWidth: 0.5, borderColor: 'black'}}>
                       <OptionsMenu
                        customButton={(<Icon type = {iconNames.materialIcons} name={iconNames.more} color={"white"} size={20} style={{marginRight: 24, borderRadius: 4, borderWidth: 0.5, borderColor: 'black'}}/>
    </View>)}
                        destructiveIndex={1}
                        options={["Copy", "Unfilter"]}
                        actions={[copy, list]}
                        style/>) :
                        (<OptionsMenu
                        customButton={(<Icon type = {iconNames.fontAwesome} name={iconNames.more} color={"white"} size={30} style={{marginRight: 24}}/>)}
                        destructiveIndex={1}
                        options={["Copy", "Filter"]}
                        actions={[copy, list]}/>)}  

以下是单击图标旁边的空白区域后调用的文件。

import React from "react";
import {
  Platform,
  ActionSheetIOS,
  UIManager,
  findNodeHandle,
  View,
  TouchableOpacity,
  Image,
  Text,
  TextInput
} from "react-native";

export default class PopupMenu extends React.Component {
  constructor(props) {
    super(props);
    this.state = { open: false };
  }

  handleClick = index => {
    let options = this.props.options;
    for (var i = 0; i < options.length; i++) {
      if (index === i) {
        if (this.props.actions[i] !== null) {
          this.props.actions[i]();
        }
      }
    }
  };

  handlePressWeb = () => {
    this.setState({ open: true });
  };

  handlePress = () => {
    let options = this.props.options;
    if (Platform.OS === "ios") {
      let destructiveIndex = -1;
      if (
        Number.isInteger(this.props.destructiveIndex) &&
        this.props.destructiveIndex >= 0
      ) {
        destructiveIndex = this.props.destructiveIndex;
      }
      ActionSheetIOS.showActionSheetWithOptions(
        {
          options: options,
          destructiveButtonIndex: destructiveIndex,
          cancelButtonIndex: options.length - 1
        },
        buttonIndex => {
          this.handleClick(buttonIndex);
        }
      );
    } else if (Platform.OS === "android") {
      UIManager.showPopupMenu(
        findNodeHandle(this.refs.menu),
        options,
        () => console.log("something went wrong with the popup menu"),
        (e, i) => {
          this.handleClick(i);
        }
      );
    }
  };
  render() {
    let options = this.state.open ? (
      <View
        style={{
          position: "absolute",
          bottom: "100%",
          right: "50%",
          flex: 1,
          elevation: 3,
          shadowColor: "black",
          shadowOpacity: 0.3,
          shadowOffset: { width: 0, height: 2 },
          shadowRadius: 4,
          borderRadius: 5,
          backgroundColor: "white"
        }}
      >
        {this.props.options.map((option, index) => {
          return (
            <View key={option}>
              <TouchableOpacity
                style={{ padding: 10 }}
                onPress={() => this.handleClick(index)}
              >
                <Text style={{ textAlign: "center" }}>{option}</Text>
              </TouchableOpacity>

              {index < this.props.options.length - 1 && (
                <View
                  style={{
                    flex: 1,
                    height: 1,
                    backgroundColor: "lightgray"
                  }}
                />
              )}
            </View>
          );
        })}
      </View>
    ) : null;

    let component = this.props.button ? (
      <Image source={this.props.button} style={this.props.buttonStyle} />
    ) : (
      this.props.customButton
    );
    if (Platform.OS === "web") {
      return (
        <View>
          <View>
            <TouchableOpacity ref={"menu"} onPress={this.handlePressWeb}>
              {component}
            </TouchableOpacity>
          </View>
          {options}
        </View>
      );
    } else {
      return (
        <View>
          <TouchableOpacity ref={"menu"} onPress={this.handlePress}>
            {component}
          </TouchableOpacity>
        </View>
      );
    }
  }
}

标签： react-nativereact-redux