Question

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

但是，当我们使用以下URL：myapp://profile时，它确实的确打开了个人资料屏幕，而不是主屏幕。它似乎适用于顶级路线，但不适用于嵌套路线。有没有一种方法可以使用我们的导航将Deeplink网址直接转到订单详情屏幕？

我们的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

因为导航器是如此嵌套，所以不要将uriPrefix添加到App.js的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'
    }
});

与expo react native的嵌套react-navigation深度链接

1 个答案: