求助createCompatNavigationProp使用示例：不知如何运用该兼容辅助工具

核心用途 #

createCompatNavigationProp 是React Navigation 5.x提供的兼容工具，用于让基于旧版Navigation Prop编写的组件适配新版API，无需大规模重构代码。

基础使用步骤 #

• 导入函数
  从compat包中导入该函数：

  import { createCompatNavigationProp } from '@react-navigation/compat';
  

• 创建兼容导航对象
  在组件中获取新版navigation prop后，用createCompatNavigationProp包装，生成兼容旧版API的对象：

  import { useNavigation } from '@react-navigation/native';
  import { createCompatNavigationProp } from '@react-navigation/compat';
  
  function OldStyleComponent() {
    const navigation = useNavigation();
    // 生成兼容版导航对象
    const compatNavigation = createCompatNavigationProp(navigation);
  
    // 使用旧版API调用方式
    const handleNavigate = () => {
      compatNavigation.navigate('TargetScreen', { id: 123 });
    };
  
    return <Button onPress={handleNavigate} title="跳转页面" />;
  }
  

关键兼容的API #

该工具主要适配旧版Navigation Prop的以下方法，保留熟悉的调用格式：

• navigate：支持旧版navigate(screenName, params)格式，无需改为新版的对象参数写法
• push：同样支持push(screenName, params)调用
• goBack：保持无参数或传入key的调用逻辑
• getParam：可继续使用compatNavigation.getParam('paramName', defaultValue)替代新版的navigation.route.params?.paramName ?? defaultValue

注意事项 #

• 仅作过渡使用：新项目建议直接采用新版React Navigation API，此工具仅用于旧组件迁移的临时适配
• 避免混合调用：同一组件内尽量统一使用兼容版或新版API，防止逻辑混乱

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