react-native - 深度链接启动应用程序，但错误地处理外部 URL

Question

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

我现在尝试实现深度链接功能。我按照官方说明成功设置了深度链接（我的意思是应用程序是通过自定义 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我指定路径 egfoo/123应该打开 screen 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。（我也试过打开手机浏览器，输入 url myapp://mobile/foo/123，错误如下）

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

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

标签： react-nativedeep-linkingreact-navigation-v5react-native-deep-linking