如何使用 useNavigation() 在与 typescript 的本机反应中导航到屏幕

Question

我想使用useNavigation 导航到屏幕。 以下是我的代码：

MainNav.tsx：

const defaultNavigationOptions: StackNavigationOptions = {
    ...
    ...
    ...
    headerRight: (props) => {
        return <AccountHeaderComponent tintColor={props.tintColor} />;
    },
    ...
    ...
    ...
};


const MainNavigator = () => {
return (
        <MainStack.Navigator>
            <MainStack.Screen
                name={"VerificationScreen}
                component={VerificationScreen}
            />
        </MainStack.Navigator>
    );
};

这创建了一个带有配置文件图标的标题，如下图所示。

点击后会跳转到组件AccountHeaderComponent

AccountHeaderComponent.tsx：

import AccountsPopUpComponent from "./AccountsPopUpComponent";

export interface AccountHeaderComponentProps {
    tintColor?: string,}

const AccountHeaderComponent = (props: AccountHeaderComponentProps) => {
    const {tintColor} = props;}
    return (<>
          <Modal>
              <AccountsPopUpComponent/>
          </Modal>
          <TouchableOpacity>
              <View>
                  <Icon name={'account-outline'}/>
              </View>
          </TouchableOpacity>
      </>
        </>
    )
};

请注意，这里有一个名为 AccountsPopUpComponent 的组件

AccountsPopUpComponent.tsx：

const AccountsPopUpComponent = (props: any) => {
    const {onClose} = props;

    const getCurrentPage = () => {
        switch (page) {
            case '':
                return <ProfileComponent />
            default:
                return <DummyComponent/>
        }
    }

    return (
          <View style={{flex: 1}}>{getCurrentPage()}</View>
    )
};

最后我有一个ProfileComponent，我想从中导航到VerificationScreen，它位于主导航器中。

ProfileComponent.tsx：

const ProfileComponent = (props: ProfileComponentProps) => {
  const navigation = useNavigation();

  const gotoVerifyScreen= () => {
    navigation.navigate(VerificationScreen);
  };

  return (
    <>
          <VerifyRibbonComponent
            gotoOTP={gotoVerifyScreen}
          />
    </>
  );
};

在gotoVerifyScreen 这里我使用useNavigation 去验证屏幕，它不会带我到那个屏幕，但是如果我点击我设备的返回按钮然后我可以看到那个屏幕。这不是我想要的那种功能。当我点击VerifyRibbonComponent 时，我想看到那个屏幕。我已经很努力了，但找不到我正在做的错误

Answer 1

如果您在导航堆栈的标题中使用组件，则应使用来自 props 的导航而不是 useNavigation（我找不到有关它的文档）。

尝试用const navigation = props.navigation;替换const navigation = useNavigation();

const defaultNavigationOptions: StackNavigationOptions = {
    ...
    ...
    ...
    headerRight: (props) => {
        return <AccountHeaderComponent 
           {...props} // <--- ADD THIS
           tintColor={props.tintColor} />;
    },
    ...
    ...
    ...
};

const AccountHeaderComponent = (props: AccountHeaderComponentProps) => {
    const {tintColor} = props;}
    return (<>
          <Modal>
              <AccountsPopUpComponent 
                {...props} // <--- ADD THIS
              />
          </Modal>
          <TouchableOpacity>
              <View>
                  <Icon name={'account-outline'}/>
              </View>
          </TouchableOpacity>
      </>
        </>
    )
};

const AccountsPopUpComponent = (props: any) => {
    const {onClose} = props;

    const getCurrentPage = () => {
        switch (page) {
            case '':
                return <ProfileComponent {...props} /> // <--- ADD THIS
            default:
                return <DummyComponent {...props} /> // <--- ADD THIS
        }
    }

    return (
          <View style={{flex: 1}}>{getCurrentPage()}</View>
    )
};

const ProfileComponent = (props: ProfileComponentProps) => {
  const gotoVerifyScreen= () => {
    props.navigation.navigate(VerificationScreen); // <--- CHANGE HERE
  };

  return (
    <>
          <VerifyRibbonComponent
            gotoOTP={gotoVerifyScreen}
          />
    </>
  );
};