React Native Navigation：模态框无法跳转至无底部标签全屏页面

核心问题 #

你的ProfileLoginModal组件中使用的navigation对象未正确关联到根栈导航器，导致调用navigation.navigate("ProfileScreen")无法触发跳转。虽然模态框本身属于根栈的Stack.Group，但如果组件没有正确获取根栈级别的导航实例，就会出现这种无响应且无报错的情况。

具体解决方案 #

1. 确保组件使用正确的导航类型定义 #

在ProfileLoginModal组件中，通过RootStackScreenProps明确约束props类型，确保拿到的是根栈的导航对象：

// 导入你的类型定义
import { RootStackScreenProps } from './path-to-your-types';

// 定义组件props类型
type ProfileLoginModalProps = RootStackScreenProps<'ProfileLoginModal'>;

export default function ProfileLoginModal({ navigation }: ProfileLoginModalProps) {
  const goToProfile = () => {
    navigation.navigate('ProfileScreen');
  };

  return (
    // 模态框UI代码
    <Button title="进入个人页面" onPress={goToProfile} />
  );
}

2. 直接获取根栈导航器（兜底方案） #

如果上述方法无效，可通过navigation.getParent()直接获取根栈的导航实例，再执行跳转：

const goToProfile = () => {
  const rootNav = navigation.getParent();
  rootNav?.navigate('ProfileScreen');
};

补充说明 #

你的导航结构设计是合理的：ProfileScreen独立于底部标签导航之外，满足不显示底部标签的需求。问题仅出在模态框的导航实例作用域上，只要确保使用根栈级别的navigation对象，就能正常完成跳转。

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