反应原生深度链接不移动到第二个深度链接答案

【问题标题】：React native deep linking not moving through to 2nd deep link反应原生深度链接不移动到第二个深度链接
【发布时间】：2021-12-16 19:49:48
【问题描述】：

当使用 react native 深度链接时，我很难使用带有第二条路径的 uri。文档中有例子https://reactnavigation.org/docs/4.x/deep-linking

我遇到的问题是 blahh://account --android 将链接到正确的屏幕，但是 blahh://account/keys --android 不会。如果我将任何路径添加到 AccountStack 中的屏幕，这也是一样的

我正在使用 React Navigation 版本 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' },
        }),
    }
);

【问题讨论】：

标签： android ios reactjs react-native deep-linking

【解决方案1】：

在进入密钥屏幕之前，我只是查看了代码库和帐户链接到帐户屏幕。

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

所以解决方法是在帐户堆栈中为此添加一个空路径，然后在转到 npx uri-scheme open blahh://account/keys --android 时它工作正常

【讨论】：