如何基于动态初始路由名称跳转至指定Tab路由？

问题场景 #

• 用户登录时，Auth Tab导航初始路由需为ProductBrowsing
• 用户注册后首次进入应用，Auth Tab导航初始路由需为AddProduct
• 当前异常：登录后页面停留在登录页，navigation.replace方法无效

问题根源 #

1. AuthenticatedNav中useEffect仅在组件挂载时执行一次，Redux状态redirection更新后无法同步到firstScreen，导致Stack导航配置未动态调整
2. 直接用navigation.replace跳转Tab内路由，未考虑Tab导航嵌套在Stack中的层级关系，路径不完整
3. AuthenticatedNav的Stack配置错误，动态修改Screen名称而非控制Tab导航的初始路由

解决方案 #

1. 重构AuthenticatedNav导航结构

固定Stack的Screen名称，将Tab导航的初始路由交由Redux状态动态控制：

const AuthenticatedNav = () => {
  const { redirection } = useSelector((state) => state.user);

  // 根据Redux状态返回Tab初始路由
  const getTabInitialRoute = () => {
    return redirection || 'ProductBrowsing';
  };

  return (
    <Stack.Navigator headerMode='none'>
      <Stack.Screen name="AuthTabs" component={() => (
        <AuthenticateTabNav initialRouteName={getTabInitialRoute()} />
      )} />
    </Stack.Navigator>
  );
};

2. 修改AuthenticateTabNav组件，支持外部传入初始路由

让Tab导航接收外部传入的initialRouteName参数：

function AuthenticateTabNav({ initialRouteName }) {
  return (
    <Tab.Navigator
      initialRouteName={initialRouteName || 'ProductBrowsing'}
      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>
  );
}

3. 修正登录跳转逻辑，使用嵌套导航路径

登录成功后，跳转到Stack中的Tab导航，并指定目标Tab路由：

const HandlerLoginBtn = async () => {
  const user_data = {
    mobile_number: username,
    password: password
  };
  await dispatch(LoginAuthentication(user_data)).then((res) => {
    if(res?.payload?.message == 'Login Success') {
      // 跳转至嵌套的Tab导航，并指定初始路由
      navigation.replace('AuthTabs', {
        screen: redirection || 'ProductBrowsing'
      });
    }
  });
};

4. 完善Redux状态处理（注册场景）

确保注册成功后redirection被设置为AddProduct：

// 注册成功的Redux reducer示例
builder.addCase(RegisterUser.fulfilled, (state, action) => {
  state.auth_access = action.payload;
  state.isLoggedIn = true;
  state.redirection = 'AddProduct'; // 注册后指定初始路由为AddProduct
});

内容的提问来源于stack exchange，提问作者DevGe