嵌套反应导航深度链接与 expo react native

Question

我们正在尝试使用 Expo Linking 向我们的 Expo React 本机应用程序添加深层链接，该应用程序使用如下方式在应用程序中打开特定路径： myapp://home/items/order-details。但是，当尝试使用该深层链接时 url 我们只会被带到主屏幕。

但是，当我们使用 url: myapp://profile 时，它确实会打开个人资料屏幕而不是主屏幕。它似乎适用于顶级路线，但不适用于嵌套路线。有没有办法让深层链接 url 使用我们的导航直接进入订单详情屏幕？

我们的 App.js 看起来像这样：

import {createRootNavigator} from './router';

const RootNav = createRootNavigator();
const prefix = Expo.Linking.makeUrl('/');

export default class App extends React.Component {
    render() {
        return (
            <Root>
                <RootNav uriPrefix={prefix}/>
            </Root>
        )
    }

这是我们的router.js

export const MenuNav = createStackNavigator ({
    Menu: {screen: Menu, path: 'menu'},
    OrderDetails: {screen: OrderDetails, path: 'order-details'}
    }
);

export const UserCreate = createStackNavigator ({
    Profile: {screen: Profile}
});

export const Tabs = createBottomTabNavigator({
   'Home': {
        screen: Home,
        path: 'home-tab'
    },
    'Items': {
        screen: MenuNav,
        path: 'items'
    }
}, 
    {tabBarComponent: (props) => {
        return (
          <TabBar
            {...props}
          />
        );
      },
        tabBarPosition: 'bottom',
    },
);


export const createRootNavigator = () => {
  return createDrawerNavigator ({
    Home: {
        screen: Tabs,
        path: 'home'
    }, 
    Profiles: {
        screen: UserCreate,
        path: 'profile'
    },
});

Answer 1

因为导航器是如此嵌套，而不是在 App.js 上的 RootNav 中添加 uriPrefix，尝试将其添加到 tabBarComponent。因此，在您的 router.js 中，您应该将 uriPrefix = {prefix} 添加到 TabBar。此外，由于 order-details 嵌套在另一个堆栈中，因此可能需要为 OrderDetails 屏幕添加另一个堆栈，因为它已经是它自己的屏幕。 router.js 应该是这样的：

const prefix = Expo.Linking.makeUrl('/');
export const MenuNav = createStackNavigator ({
    Menu: {screen: Menu, path: 'menu'},
    OrderDetails: {screen: OrderDetails, path: 'order-details'}
    }
);

export const UserCreate = createStackNavigator ({
    Profile: {screen: Profile}
});

export const Tabs = createBottomTabNavigator({
   'Home': {
        screen: Home,
        path: 'home-tab'
    },
    'Items': {
        screen: MenuNav,
        path: 'items'
    }
}, 
    {tabBarComponent: (props) => {
        return (
          <TabBar
            {...props}
            uriPrefix={prefix}
          />
        );
      },
        tabBarPosition: 'bottom',
    },
);


export const createRootNavigator = () => {
  return createDrawerNavigator ({
    Home: {
        screen: Tabs,
        path: 'home'
    }, 
    Profiles: {
        screen: UserCreate,
        path: 'profile'
    },
    OrderDetails: {
        screen: OrderDetails,
        path: 'history/order/:orderId'
    }
});

嵌套反应导航深度链接与 expo react native

Nested react-navigation deep-linking with expo react native

reactjs

react-native

react-navigation

expo

stack-navigator