嵌套的反应导航深度链接与expo反应原生

Question

我们正在尝试使用Expo Linking添加深度链接到我们的世博会反应原生应用程序，该应用程序使用以下内容在应用程序中打开特定路径：myapp://home/items/order-details。但是，当尝试使用该深层链接URL时，我们只会进入主屏幕。

但是，当我们使用这个url：myapp://profile时，它确实打开了配置文件屏幕而不是主屏幕。它似乎适用于顶级路由，但不适用于嵌套路由。有没有办法让深度链接网址使用我们的导航直接进入订单详细信息屏幕？

我们的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上的uriPrefix中添加RootNav，而是尝试将其添加到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'
    }
});