React Native页面跳转报错navigation.navigate及依赖缺失问题求助

问题1：TypeError: undefined is not an object (evaluating 'navigation.navigate') 跳转失败 #

故障原因 #

navigation.navigate的入参规则为路由注册时的name属性值，不是目标页面的文件相对路径；若属性透传链路存在问题也会导致navigation属性为undefined。

修复步骤 #

• 确认App.js路由配置中AcceptedBookingScreen对应的Stack.Screen的name字段值，跳转时直接传该值，不要传文件路径：
  正确跳转代码示例：

  // 假设路由注册为 <Stack.Screen name="AcceptedBookingScreen" component={AcceptedBookingScreen} />
  navigation.navigate('AcceptedBookingScreen')
  

• 若透传navigation后仍报undefined，可直接在NewOrderPopUp组件内通过useNavigation钩子获取实例，无需属性透传：

  import { useNavigation } from '@react-navigation/native';
  
  const NewOrderPopUp = () => {
    const navigation = useNavigation();
    // 跳转触发逻辑
    const handleJump = () => {
      navigation.navigate('AcceptedBookingScreen');
    }
    // 其余组件逻辑
  }
  

问题2：Error: Unable to resolve module react-native-safe-area-context 模块缺失 #

故障原因 #

@react-navigation/native 6.x版本依赖react-native-safe-area-context、react-native-screens两个对等依赖，仅安装导航核心包和栈导航包会导致依赖缺失。

修复步骤 #

• 安装缺失的对等依赖：
  npm环境执行：
  npm install react-native-safe-area-context react-native-screens
  yarn环境执行：
  yarn add react-native-safe-area-context react-native-screens
• iOS端额外执行pod安装：
  cd ios && pod install && cd ..
• 清空开发服务缓存重启项目：
  npx react-native start --reset-cache
  之后重新编译运行项目即可。

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