使用 Navigation v5 在 React Native 中进行深度链接

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},
};

这个结构工作正常，但 typescript 抱怨没有在 linking 变量中添加 screens 标签。此外，如果添加上述结构，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 } 时感到困惑，这会按预期工作但在这种情况下没有必要。

使用 Navigation v5 在 React Native 中进行深度链接

Deeplinking in React Native with Navigation v5

react-native

react-navigation

react-navigation-v5