按下时使用 MenuItem 进行导航

Question

我正在使用 UI-Kitten 的顶栏，在那里，我想按按时切换到不同的屏幕：

const MenuIcon = (props): IconElement => (
    <Icon
      {...props}
      name='three-bars'
    />
);

const InfoIcon = (props): IconElement => (
    <Icon
      {...props}
      name='info'
    />
);

export const TopNavigator = (): React.ReactElement => {
  const [menuVisible, setMenuVisible] = React.useState(false);

  const toggleMenu = (): void => {
    setMenuVisible(!menuVisible);
  };

  const renderMenuAction = (): React.ReactElement => (
    <TopNavigationAction
      icon={MenuIcon}
      onPress={toggleMenu}
    />
  );
  const themeContext = React.useContext(ThemeContext);
  const renderRightActions = (): React.ReactElement => (
    
    <>
      <OverflowMenu
        anchor={renderMenuAction}
        visible={menuVisible}
        onBackdropPress={toggleMenu}
      >
        <MenuItem 
          accessoryLeft={InfoIcon}
          title='About'
          onPress={() => navigation.navigate('myScreenName')}
        />
      </OverflowMenu>
    </>
  );

  return (
    <Layout
      style={styles.container}
      level='1'
    >
      <TopNavigation
        alignment='center'
        title='App'
        accessoryRight={renderRightActions}
      />
    </Layout>
  );
};

当我现在单击“关于”时，它会显示：

Property 'navigation' doesn't exist

我知道我必须使用导航道具做一些事情，但我真的不知道在哪里以及如何做。我想不通。我所尝试的一切都会导致更多的错误和问题。有人可以帮我吗？

Answer 1

在

TopNavigator

执行上下文中，没有

navigation

的定义。我不知道你是否遵守

react-navigation

的等级规则。但如果你这样做了，你会在

useNavigation

函数中调用

TopNavigator

钩子，如下所示：

export const TopNavigator = (): React.ReactElement => {
  const navigation = useNavigation();

那么您就不应该看到该错误。