时间戳

首页 > 解决方案 > React Native Deep Linking 未重定向到指定的屏幕

javascript - React Native Deep Linking 未重定向到指定的屏幕

问题描述

我正在尝试按照以下文档在 React Native 中实现深度链接：https ://reactnavigation.org/docs/configuring-links 。

这里的主要问题是我无法打开特定屏幕，它总是打开主屏幕。

我目前只在 iOS 中进行测试，但在 Android 中也会发生同样的情况。

我定义了自定义 url 方案

<dict>
   <key>CFBundleURLName</key>
   <string>com.react_native_starter_kit</string>
   <key>CFBundleURLSchemes</key>
   <array>
   <string>test</string>
   </array>
</dict>

定义的链接对象

const linking = {
  prefixes: ['test://'],
  config: {
    screens: {
      App: {
        screens: {
          Settings: 'settings/:id',
        },
      },
    },
  },
};

和导航

export const Router = () => {
  ...

  return (
    <NavigationContainer linking={linking}>
      <Main />
    </NavigationContainer>
  );
};

const Main = (props) => {
  ...

  return (
    <Stack.Navigator
      screenOptions={{ headerShown: false }}
      initialRouteName={routesName.App}>
      {userToken ? (
        <Stack.Screen name={routesName.App} component={TabNavigator} />
      ) : (
        <Stack.Screen name={routesName.Auth} component={AuthStack} />
      )}
    </Stack.Navigator>
  );
};

const TabNavigator = () => {
  ...

  return (
    <Tab.Navigator>
      <Tab.Screen
        name={routesName.Home}
        component={HomeStack}
        options={navigationOptions(routesName.Home, theme)}
      />
      <Tab.Screen
        name={routesName.Settings}
        component={SettingsStack}
        options={navigationOptions(routesName.Settings, theme)}
      />
    </Tab.Navigator>
  );
};

当我test://settings/123在 safari 中键入时，或者xcrun simctl openurl booted test://settings/123它应该打开设置选项卡，但它总是只打开主屏幕。我尝试了很多linkinobj 组合，结果总是相同。即使我删除linking={linking}行为是相同的，应用程序也会打开主屏幕。就像导航忽略了一样linking={linking}。

标签： javascriptiosreact-native

解决方案

您的链接对象应该是这样的

const linking = {
  prefixes: ['test://'],
  config: {
    screens: {
      App: {
        path: "app",
        screens: {
          Settings: 'settings/:id',
        },
      },
    },
  },
};

保存后运行此命令以测试深层链接

npx uri-scheme 打开 test://app/settings/778GHFHG --ios

推荐阅读