深层链接启动应用程序，但错误地处理外部网址

问题描述

我正在开发一个 React Native 项目，使用 React-Navigation v5。

我现在尝试实现深层链接功能。我按照 official instruction 设置深层链接成功（我的意思是该应用程序是通过自定义 url 方案启动的）。接下来我需要处理外部链接，我的问题就出现在这一点上。

为了在我的 react-native 项目中处理外部链接，我也遵循了指令 configure links。

我在我的项目中定义了一个 linking.js：

const config = {
  screens: {
    // I explained why I nest FooScreen like this if you continue reading

    FeatureFlow: {
      SubfeatureFlow: {
        FooScreen: {
          path: 'foo/:myId',},};

const linking = {
  prefixes: ['myapp://mobile'],config,};

export default linking;

然后，在我的 NavigationContainer 中，我使用如下链接：

return (
    <NavigationContainer
      linking={linking}
      ...
     >
      <MainFlow />
     </NavigationContainer>

正如你在上面看到的，三件事情值得注意：

1. 在 linking.js 中，在 config 中，我指定了路径，例如foo/123 应打开屏幕 FooScreen。

2. FooScreen 是一个嵌套屏幕。

3. NavigationContainer 包含一个名为 MainFlow 的组件。

为了说明 FooScreen 如何嵌套在导航层次结构中，让我们从 MainFlow 开始，它看起来像这样：

const MainFlow = ({navigation}) => {
  const Drawer = createDrawerNavigator();
  return (
    <Drawer.Navigator
      ...>
      <Drawer.Screen name="FeatureFlow" component={MyFeatureFlow} />
      ...
    </Drawer.Navigator>
  );
};

如您所见，MainFlow 是一个 DrawerNavigator，它承载一个名为 FeatureFlow 的屏幕，引用组件 MyFeatureFlow。

MyFeatureFlow 看起来像这样：

const MyFeatureFlow = ({navigation}) => {
  const FeatureStack = createStackNavigator();

  return (
    <FeatureStack.Navigator
      ...>
       <FeatureStack.Screen
         name="SubfeatureFlow"
         component={MySubfeatureFlow}/>
    </FeatureStack.Navigator>
  )

如上所示，FeatureFlow 是一个堆栈导航器，它承载一个名为 SubfeatureFlow 的屏幕，引用组件 MySubfeatureFlow。

而 MySubfeatureFlow 就像：

const MySubfeatureFlow = ({navigation}) => {
  const SubfeatureStack = createStackNavigator();

  return (
    <SubfeatureStack.Navigator
      ...>
       <SubfeatureStack.Screen
          name="FooScreen"
          component={MyFooScreen}
    </SubfeatureStack.Navigator>
  )

如上所示，MySubfeatureFlow 是另一个堆栈导航器，它托管一个名为 FooScreen 的屏幕，引用组件 MyFooScreen。

现在您明白为什么在 linking.js 配置中，FooScreen 是这样嵌套的。

然后，我在 iOS 模拟器上运行我的应用程序。该应用程序启动。我在模拟器上杀死了应用程序。

然后，我运行命令 npx uri-scheme open myapp://mobile/foo/123 --ios。 （我也试过打开手机浏览器，输入网址myapp://mobile/foo/123，同样报错）

我在模拟器上看到，应用程序是通过命令启动的，这意味着我的深层链接已设置。但是，处理外部链接以打开 FooScreen 失败，最终出现以下错误：

该错误告诉我导航负载尝试将 123 视为屏幕，而应用将 foo 视为我项目中的屏幕名称。我完全不明白为什么会这样。我的链接配置有问题吗？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）