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

Question

我正在尝试使用导航 v5 在 React Native 中使用 Deeplinking。我在关注官方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},
};

这个结构工作正常，但打字稿抱怨没有在linking 变量中添加screens 标记。此外，NotFound: '*" (unmatched route) 添加上述结构会导致崩溃。

如果我在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 } 感到困惑，这将按预期工作，但在这种情况下是不必要的。