使用React-Navigation v5的深层链接

时间:2020-08-01 08:15:26

标签: typescript react-native react-navigation deep-linking

我试图在带有响应导航的react本机项目中使用深层链接,但在这两个平台(ios和android)上都出现了一些奇怪的情况。

我的代码 NavigationContainer

const linking = {
        prefixes: ['https://latineo.com', 'latineo://'],
        config: {
            Home: {
                path: 'homestack',
                initialRouteName: 'Explore',
                screens: {
                    Explore: 'explore',
                    Posts: 'posts',
                    Favorites: 'favorites',
                    Settings: 'settings',
                },
            },
            ExploreOptions: {
                path: 'explorestack',
                initialRouteName: 'Restaurants',
                screens: {
                    Restaurants: 'rts',
                    ShowRestaurants: 'restaurants',
                    ShowRestaurant: 'restaurant/:id',
                },
            }
        },
    };

<NavigationContainer
            theme={navigatorTheme}
            ref={(nav: any) => {
                navigator = nav;
                NavigationService.setNavigator(navigator);
            }}

            linking={linking}
            fallback={<LoadingIndicator
                size='giant'
            ></LoadingIndicator>}
            onStateChange={(nav) => {
                console.log("AppNavigator -> nav", nav)
            }}
        >
            {isAuth && <HomeNavigator />}
            {!isAuth && didTryAutoLogin && didOnboard && didPermission && <AuthNavigator />}
            {!isAuth && didTryAutoLogin && !didOnboard && <OnboardScreen />}
            {!isAuth && didTryAutoLogin && didOnboard && !didPermission && <LocationPermissionScreen />}
            {!isAuth && !didTryAutoLogin && <IsAuthScreen />}
        </NavigationContainer>

HomeNavigator

const Stack = createStackNavigator<HomeParamList>();
export const HomeNavigator = (): React.ReactElement => {
    return (
        <Stack.Navigator
            initialRouteName={'Home'}
            headerMode='none'
        >
            <Stack.Screen name='Home' component={HomeTabsNavigator} />
            <Stack.Screen name='ExploreOptions' component={LayoutsNavigator} />
            <Stack.Screen name='CreateOptions' component={PostNavigator} />
            <Stack.Screen name='FavoritesOptions' component={FavoritesNavigator} />
            <Stack.Screen name='SettingsOptions' component={SettingsNavigator} />
        </Stack.Navigator>
    );
};

export const HomeTabsNavigator = (): React.ReactElement => {
    return (
        <BottomTab.Navigator
            screenOptions={TabBarVisibleOnRootScreenOptions}
            initialRouteName={'Explore'}
            tabBar={props => <HomeBottom {...props} />}>
            <BottomTab.Screen name='Explore' component={LayoutsScreen} />
            <BottomTab.Screen name='Post' component={PostsScreen} />
            <BottomTab.Screen name='Favorites' component={LayoutsScreen} />
            <BottomTab.Screen name='Settings' component={SettingsContainer} />
        </BottomTab.Navigator>
    );
};

场景1

当我尝试使用xcrun simctl openurl引导的latineo:// homestack / explore或latineo:// homestack / settings,explorstack / restaurant /:id等在后台运行(后台应用程序)时,它工作正常,但是当应用程序关闭时(已杀死)它总是打开homestack / explore。

场景2 当我尝试使用explorerstack / restaurant /:id时,它可以工作,但是当我按下navigation.back()按钮时,它会返回到空白屏幕(如果使用该白色屏幕中的手势,则可以返回到主屏幕)。 explorestack/restaurant/:id

blank screen

当我尝试使用“后退”按钮浏览到同一屏幕但没有标题时,尝试使用explorstack /餐厅时也会发生类似的情况。

explorestack/restaurants without header

0 个答案:

没有答案