javascript - React Native弹出菜单无法使用导航 Prop 进行导航

我有Message反应导航堆栈屏幕。

...

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: {
    ...
  }
});

看来导航道具无法传递给MessagePopupMenu组件，当我单击AddFriend和AddGroup菜单按钮时。

Message组件已经过测试，可以作为正确的导航屏幕。

最佳答案

根据评论：onSelect应该绑定到MenuOption组件，例如

    <MenuOption style={styles.menuOption} onSelect={() => navigation.navigate("AddGroup")}>
      <Text style={styles.text}>
        AddGroup
      </Text>
    </MenuOption>

关于javascript - React Native弹出菜单无法使用导航 Prop 进行导航，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/53864418/