你好,我将垂直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>
);
}
}
}