React Native底部标签嵌套栈导航返回及切页行为异常问题

问题原因分析 #

1. 跳转闪烁问题 #

跨Tab导航到嵌套栈的非初始路由时，React Navigation默认执行逻辑为：先初始化目标栈的initialRouteName对应页面（即MyProfile），再将指定的目标路由（UserProfile）压入栈，两个页面的加载过程会产生可见的闪烁现象。

2. Tab状态不重置问题 #

底部Tab导航默认会缓存每个Tab对应栈的路由状态，切换Tab时不会主动重置栈结构。首次从Home跳转到Profile栈的UserProfile后，Profile栈的路由状态就被缓存为[MyProfile, UserProfile]，后续点击Profile Tab会直接复用缓存状态，显示栈顶的UserProfile页面，此时调用goBack会弹出UserProfile后，栈内仅剩余MyProfile，再次点击返回就会跳出Profile栈回到Home页面。

修复方案 #

方案1：Tab失焦自动卸载（轻量解决方案） #

直接在Tab导航配置中开启unmountOnBlur属性，每次Tab切换出可视区域时自动卸载对应栈，下次进入时重新初始化，默认展示初始路由MyProfile，可直接修复Tab状态不重置的问题：

<Tab.Navigator
  screenOptions={{
    unmountOnBlur: true
  }}
>
  <Tab.Screen name="Home" component={HomeStackScreen} />
  <Tab.Screen name="Profile" component={ProfileStackScreen} />
</Tab.Navigator>

配合调整Home页面的跳转逻辑，使用CommonActions直接指定Profile栈的初始路由状态，避免加载MyProfile产生的闪烁：

import { CommonActions } from '@react-navigation/native';

// Home页面跳转逻辑修改为
onPress={() => navigation.dispatch(
  CommonActions.navigate({
    name: 'Profile',
    state: {
      routes: [
        { name: 'UserProfile', params: { userId: 1235 } }
      ]
    }
  })
)}

方案2：焦点监听手动重置栈（适合需要保留Tab缓存的场景） #

如果不需要每次切换Tab都重新加载整个栈，可以在ProfileStack中监听焦点事件，激活时判断路由状态手动重置到初始页：

import { useFocusEffect } from '@react-navigation/native';

function ProfileStackScreen({navigation}) {
  useFocusEffect(() => {
    const state = navigation.getState();
    // 如果当前栈顶不是MyProfile，重置到栈顶
    if (state.routes[state.index].name !== 'MyProfile') {
      navigation.popToTop();
    }
  });

  // 原有栈配置保持不变
}

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