React Native Navigation，从自己的应用程序内打开通用链接

Question

我正在使用React Native 的React Navigation。我已成功将其配置为处理通用链接，如下所示

// linking.ts
import { APP_ID } from '@env';

const config = {
    screens: {
        LoginScreen: 'authorize',
        RegisterScreen: 'register',
        CustomerStack: {
            screens: {
                OrderDetailScreen: 'customer/order/:orderId',
            },
        },
    },
};

const linking = {
    prefixes: [`${APP_ID}://app/`, 'https://example.com/app/'],
    config,
};

export default linking;

// App.tsx

import linking from './linking'

const App = () => {
   return (
      <NavigationContainer linking={linking}> <MyApp /> </NavigationContainer>
   )
}

当我按下浏览器中的链接（例如 ）时https://example.com/app/customer/order/1234，它会成功打开我的应用程序的订单页面。

问题

我希望能够打开 url（例如https://example.com/app/customer/order/1234 在我的应用程序内部）并让它打开订单页面。我努力了

<Button onPress={() => Linking.openURL('https://example.com/app/customer/order/1234')} />

但（在IOS上测试）它首先切换到网络浏览器打开链接，然后打开我的应用程序。

是否可以直接在我的应用程序内打开订单页面，而无需先切换到浏览器。

注意：我正在尝试实现一个应用内通知历史记录页面，每个通知项目都有保存在数据库中的链接，当用户单击该项目时，我希望将用户导航到 中配置的页面linking.ts。我知道可以解析链接并使用navigation.navigate()它，但这意味着我将有 2 个位置用于链接配置。我认为如果我可以重用 React Navigation 提供的现有逻辑，那就太好了。

Answer 1

在 React Navigation 中，您可以使用useLinkTo挂钩。该挂钩允许您使用路径在应用程序内部导航。

这将允许您使用以下选项：

const linkTo = useLinkTo();

return (
   <Button onPress={() => linkTo('/customer/order/1234')} />
);

如果必须使用 URL，那么您可以使用extractPathFromURL（一个内部 React Navigation 函数）来删除前缀。

import extractPathFromURL from '@react-navigation/native/src/extractPathFromURL';
import linking from './linking'

// ...

const linkTo = useLinkTo();

return (
   <Button onPress={() => {
     const path = extractPathFromURL(linking.prefixes, 'https://example.com/app/customer/order/1234');
     const pathWithSlash = path.startsWith('/') ? path : '/' + path;
     linkTo(pathWithSlash);
   } />
);

extractPathFromURL不是官方 API 的一部分，可能会在未来版本中删除。为了可靠性，您可以在项目中创建此函数的副本。