我有 Message
react导航堆栈屏幕。
...
class Message extends React.Component {
static navigationOptions = ({ navigation }) => ({
...
headerRight: <MessagePopupMenu navigation={navigation} />
});
render() {
...
}
}
我想使用react-native-popup-menu
导航到另一个屏幕。
...
export const MessagePopupMenu = ({ navigation }) => (
<View>
<Menu>
<MenuTrigger style={styles.menuTrigger}>
<Icon name="ios-add" size={30} color="#757575" />
</MenuTrigger>
<MenuOptions optionsContainerStyle={{ marginTop: 40, width: 100 }}>
<MenuOption style={styles.menuOption}>
<Text
style={styles.text}
onSelect={() => navigation.navigate("AddUser")}
>
AddFriend
</Text>
</MenuOption>
<MenuOption>
<Divider />
</MenuOption>
<MenuOption style={styles.menuOption}>
<Text
style={styles.text}
onSelect={() => navigation.navigate("AddGroup")}
>
AddGroup
</Text>
</MenuOption>
</MenuOptions>
</Menu>
</View>
);
const styles = StyleSheet.create({
menuOption: {
...
},
menuTrigger: {
...
},
text: {
...
}
});
当我单击AddFriend
和AddGroup
菜单按钮时,导航道具似乎无法传递给MessagePopupMenu
组件。
Message
组件已经被测试为正确的导航屏幕。
按注释: onSelect
应绑定到 MenuOption
组件,例如
<MenuOption style={styles.menuOption} onSelect={() => navigation.navigate("AddGroup")}>
<Text style={styles.text}>
AddGroup
</Text>
</MenuOption>