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

Posted 2023-03-13

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

【英文标题】：How to navigate to a screen using useNavigation() in react native with typescript

【发布时间】：2021-09-13 13:18:15

【问题描述】：

我想使用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 时，我想看到那个屏幕。我已经很努力了，但找不到我正在做的错误

【参考方案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
          />
    </>
  );
;

【讨论】：

为此，我必须将导航作为道具传递给所有组件，我不想这样做

只针对导航头部的组件。 useNavigation 将适用于所有其他组件

它不工作Property 'navigation' does not exist on type 'ProfileComponentProps'.

我更新了答案。您没有从 react-navigation 传递原始道具