React Native+TypeScript下使用useNavigation跳转页面不显示如何解决

核心原因 #

• 弹窗层级遮挡：你触发跳转时AccountHeaderComponent中的Modal处于打开状态，React Native Modal的层级默认高于导航栈所有页面，新跳转的VerificationScreen被Modal遮挡，按返回键时Modal先被销毁才会露出下层页面。
• navigate参数错误：navigation.navigate的第一个参数需要传入Stack.Screen上定义的路由名称字符串，不能直接传入组件对象。
• 语法错误：MainNav.tsx中VerificationScreen的name属性缺少闭合引号，会导致路由匹配失败。

修复步骤 #

1. 修正MainNav.tsx的语法错误 #

补全路由名称的闭合引号：

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

2. 给Modal添加显隐控制，透传关闭方法 #

修改AccountHeaderComponent.tsx，添加Modal可见状态控制，把关闭方法传给下层组件：

import { useState } from 'react';
import AccountsPopUpComponent from "./AccountsPopUpComponent";

export interface AccountHeaderComponentProps {
    tintColor?: string,
}

const AccountHeaderComponent = (props: AccountHeaderComponentProps) => {
    const {tintColor} = props;
    const [modalVisible, setModalVisible] = useState(false);

    const closeModal = () => {
        setModalVisible(false);
    };

    return (<>
          <Modal visible={modalVisible} onRequestClose={closeModal}>
              <AccountsPopUpComponent onClose={closeModal}/>
          </Modal>
          <TouchableOpacity onPress={() => setModalVisible(true)}>
              <View>
                  <Icon name={'account-outline'}/>
              </View>
          </TouchableOpacity>
      </>
    )
};

3. 透传关闭方法到ProfileComponent #

修改AccountsPopUpComponent.tsx，把Modal关闭方法传给ProfileComponent：

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

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

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

4. 修正跳转逻辑，跳转前先关闭Modal #

修改ProfileComponent.tsx，先关闭Modal再执行跳转，修正navigate参数：

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

  const gotoVerifyScreen= () => {
    onModalClose();
    // 等待Modal关闭动画完成后再跳转，避免动画冲突，可根据实际动画时长调整延迟时间
    setTimeout(() => {
      navigation.navigate('VerificationScreen');
    }, 300)
  };

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

内容的提问来源于stack exchange，提问作者pratteek shaurya