反应原生深层链接不会移动到第二个深层链接

Question

When using react native deep linking, I am struggling to use a uri with a 2nd path. There are examples in the documentation https://reactnavigation.org/docs/4.x/deep-linking

The issue I am having is blahh://account --android will link to the correct screen however, blahh://account/keys --android will not. This is the same if I add any path to the screens in the AccountStack

I am using react navigation version 4.

const AccountStack = createStackNavigator(
    {
        Account: {
            screen: Account,
            path: '',
            navigationOptions: {
                ...accountNavigationOptions,
                ...Account.navigationOptions,
            },
        },
        AccountLoginAndSecurity: {
            screen: AccountLoginAndSecurity,
            path: '',
            navigationOptions: () => ({
                ...defaultNavigationOptions,
                headerTransitionPreset: 'uikit',
            }),
        },
        CreateAccount: {
            screen: CreateAccount,
            path: '',
            navigationOptions: () => ({
                ...defaultNavigationOptions,
                headerTransitionPreset: 'uikit',
            }),
        },
        KeysList: {
            screen: KeysList,
            path: 'keys',
            navigationOptions: () => ({
                ...defaultNavigationOptions,
                headerTransitionPreset: 'uikit',
            }),
        },
        AccountSwitch: createAnimatedSwitchNavigator(
            {
                AccountLoading: {
                    screen: AccountLoading,
                    path: '',
                    params: {
                        theme: 'orange',
                        navigateScreen: 'CreateAccountOrLogin',
                    },
                },
                CreateAccountOrLogin: CreateAccountOrLogin,
                Continue: AccountMenu,
            },
            {
                initialRouteName: 'AccountLoading',
                transition: createSwitchTransition(),
            }
        ),
    },
    {
        defaultNavigationOptions: accountNavigationOptions,
    }
);

export const TabNavigator = createBottomTabNavigator(
    {
        Explore: {
            screen: ExploreStack,
            path: '',
        },
        Bookings: {
            screen: YourBookingsStack,
            path: '',
        },
        Account: {
            screen: AccountStack,
            path: 'account',
        },
    },
    {
        defaultNavigationOptions: ({ navigation }) => ({
            // eslint-disable-next-line react/display-name
            tabBarIcon: ({ focused }): React.ReactNode => {
                const { routeName } = navigation.state;
                let iconName;
                if (routeName === 'Explore') {
                    focused
                        ? (iconName = require('assets/icons/bottom_tab_icons/explore_tab_icon.png'))
                        : (iconName = require('assets/icons/bottom_tab_icons/explore_tab_icon_unselected.png'));
                } else if (routeName === 'Bookings') {
                    focused
                        ? (iconName = require('assets/icons/bottom_tab_icons/bookings_tab_icon.png'))
                        : (iconName = require('assets/icons/bottom_tab_icons/bookings_tab_icon_unselected.png'));
                } else if (routeName === 'Account') {
                    focused
                        ? (iconName = require('assets/icons/bottom_tab_icons/account_tab_icon.png'))
                        : (iconName = require('assets/icons/bottom_tab_icons/account_tab_icon_unselected.png'));
                }
                return <Image source={iconName} />;
            },

            tabBarOptions: {
                showLabel: false,
                style: {
                    elevation: 3,
                    borderTopColor: 'transparent',
                    backgroundColor: '#fff',
                    height: 50,
                },
            },
        }),

        navigationOptions: () => ({
            headerBackTitle: null,
            headerTitleStyle: { color: 'orange' },
        }),
    }
);

Answer 1

According to the documentation :

If we have nested navigators, we need to provide each parent screen with a path. All the paths will be concatenated and can also be an empty string. This path spec would be friends/chat/:user.

So, if you want to pass a query parameter with your URL, you need to pass it with path props like this:

Account: {
  screen: AccountStack,
  path: 'account/:key'
}

Answer 2

I just looked at the codebase and Account links through to the account screen before going to the keys screen.

Account: {
        screen: Account,
        path: '',
        navigationOptions: {
            ...accountNavigationOptions,
            ...Account.navigationOptions,
        },
    },

so the fix was to add an empty path to this in the accountstack then it worked fine when going to npx uri-scheme open blahh://account/keys --android