如何动态跳转到特定的初始选项卡路由路由名称？

Question

我无法根据动态初始路线名称跳转到特定选项卡导航。

场景如下：

1. 如果用户只想登录，Auth选项卡导航的初始路线必须位于ProductBrowsing
2. 如果用户第一次进入应用程序并且用户在应用程序中注册，则Auth选项卡导航的初始路线必须位于AddProduct。

问题：当我登录屏幕时，未更改屏幕卡在登录状态，导航替换不起作用。

处理程序登录：

   const HandlerLoginBtn = async () => {
    const user_data = {
      mobile_number: username,
      password: password
    }
    await dispatch(LoginAuthentication(user_data)).then((res) => {
      if(res?.payload?.message == 'Login Success') {
        
        if(redirection == 'ProductBrowsing') {
          navigation.replace('ProductBrowsing')
        }
        else if(redirection == 'AddProduct') {
          navigation.replace('AddProduct')
        }
      }
    })
  }

身份验证选项卡：

   function AuthenticateTabNav() {
    return (
        <Tab.Navigator  tabBarOptions={{
            inactiveTintColor: '#032363',
            labelStyle: { fontSize:12, fontWeight:'500'},
            style: {
              backgroundColor: '#ffff',
            }
        }}
        >
            <Tab.Screen
                options={{
                    tabBarLabel: 'BUY',
                    tabBarIcon: ({ focused , color, size }) => (
                        focused ? (
                            <Image h="4" w="4" 
                            source={require('./assets/tab_icons/buy/blue_buy.png')}></Image>
                        ): (
                            <Image h="4" w="4" 
                            source={require('./assets/tab_icons/buy/black_buy.png')}></Image>
                        )
                        
                    ),
                }}
                name="ProductBrowsing"
                component={ProductBrowsingScreen}
            />

            <Tab.Screen
                options={{
                    tabBarLabel: 'SELL',
                    tabBarIcon: ({ focused , color, size }) => (
                        focused ? (
                            <Image h="4" w="4" 
                            source={require('./assets/tab_icons/sell/blue_sell.png')}></Image>
                        ): (
                            <Image h="4" w="4" 
                            source={require('./assets/tab_icons/sell/black_sell.png')}></Image>
                        )
                    ),
                }}
                name="AddProduct"
                component={AddProductScreen}
            />
        </Tab.Navigator>
    )
}

导航：

    const AuthenticatedNav = () => {
    
    const {redirection} = useSelector((state) => state.user)
    const [firstScreen, setFirstScreen] = useState('');
    console.log(firstScreen)

    useEffect(() => {
        setFirstScreen(redirection)
    }, [])
    

    return (
        <Stack.Navigator initialRouteName={firstScreen == '' ? 'ProductBrowsing' : 'AddProduct'} headerMode='none'>
            <Stack.Screen component={AuthenticateTabNav}  name={firstScreen == '' ? 'ProductBrowsing' : 'AddProduct' } />  
        </Stack.Navigator>
    )
}

Redux 状态：

builder.addCase(LoginAuthentication.fulfilled, (state, action) => {
 
  if(action.payload?.message == 'Invalid Username Or Password') {
    state.auth_access = []
    state.isLoggedIn = false
    state.isLoading = false
    state.redirection = ''
  }else {
    state.auth_access = action.payload
    state.isLoggedIn = true
    state.redirection = 'ProductBrowsing'
  }
  
})

Answer 1

我在这里制作了完整的示例https://snack.expo.dev/O3vW24UCl

如果我理解正确，您希望根据用户登录状态从一个选项卡导航到另一个选项卡。

更改主堆栈上的

initialRouteName

没有用，因为您在案例的选项卡内移动。 你想做的事情是一样的，但是在

Tab.Navigator

。

const Tabs = () => {
  const isUserLoggedIn = useSelector((state) => {
    return state.isUserLoggedIn;
  });

  return (
    <Tab.Navigator
      initialRouteName={isUserLoggedIn ? "AddProduct" : "ProductBrowsing"}
      >
      <Tab.Screen
        options={{
          tabBarLabel: 'BUY',
        }}
        name="ProductBrowsing"
        component={ProductBrowsingScreen}
      />

      <Tab.Screen
        options={{
          tabBarLabel: 'SELL',
        }}
        name="AddProduct"
        component={AddProductScreen}
      />
    </Tab.Navigator>
  );
};

显然，在示例中状态并未持续。

Answer 2

几天前我刚刚遇到这个功能 我的方法对我来说效果很好.. 所以，我确信它总体上有效..

我使用 useContext 钩子动态更新initialRouteName。

import {createContext, useEffect, useState} from 'react';
import AsyncStorage from '@react-native-async-storage/async-storage';
export const InitialRouteContext = createContext({
initialRoute: '',
updateInitialRoute: () => {},});

像您一样创建上下文并使用 InitialRouteProvider 包装应用程序（入口点）（只需这样做..）

使用AsyncStorage将initialRouteName存储在设备中，因此无论您在哪里进行initialRoute，都可以更新存储并从上下文中调用initialRouteName。

const initialRouteCtx = useContext(InitialRouteContext);
  const setInitialRoute = initialRouteCtx.initialRoute
? initialRouteCtx.initialRoute
: `default_screen`;
<Stack.Navigator initialRouteName={setInitialRoute} screenOptions={{...}}>