Question

我正在尝试使用导航v5在React Native中使用深度链接。我正在关注官方documentation。

但是使用官方文档中提到的配置结构似乎存在问题。

config看起来像这样

  const config = {
  screens: {
    Home: {
      initialRouteName: 'Home',
      screens: {
        NPM: {
          screen: {
            CameraNPM: {
              path: 'CameraNPM/:cameraview',
              params: {cameraview: 3},
            },
          },
        },
      },
    },
    ImagePicker: {
      path: 'ImagePicker/:id',
      params: {
        id: 0,
      },
      parse: {
        id: (id: string) => `user-${id}`,
      },
      stringify: {
        id: (id: string) => id.replace(/^user-/, ''),
      },
    },
    Geolocation: 'Geolocation',
    NotFound: '*', //error!
  },
};

和linking

  const linking = {
  prefixes: ['url://homescreen://', 'homescreen://'],
  config: {config},
};

此结构工作正常，但是打字稿抱怨没有在screens变量中添加linking标记。此外，如果使用上述结构添加NotFound: '*"（不匹配的路由），则会导致崩溃。

如果我在config: {config}前面加上screens（screens{config: {config}}），则打字稿会停止抱怨，并且路由不匹配不会导致崩溃，但嵌套导航无法正常工作。

我在做什么错了？

谢谢。

Answer 1

您必须更改此设置：

const linking = {
    prefixes: ['url://homescreen://', 'homescreen://'],
    config: { config } 
}

使用

const linking = {
    prefixes: ['url://homescreen://', 'homescreen://'],
    config: config 
}

或更短：

const linking = {
    prefixes: ['url://homescreen://', 'homescreen://'],
    config
}

第一个选项（您正在使用的选项）将导致具有以下结构的变量：

{
    prefixes: Array<string>,
    config: {
        config: {
            // Your actual config
        }
    }
}

因为要像这样传递它：config: { config }而不是config: config或只是config。尝试执行config: { ...config }可能会感到困惑，该操作可以按预期工作，但在这种情况下是不必要的。

React Native与Navigation v5中的深层链接

1 个答案: