React Navigation initialRouteName因状态切换失效问题解决

我编写了一个PagesManager组件，代码如下：

const Tab = createMaterialTopTabNavigator<ContentNavigationParamList>();

export default function PagesManager() {

    let contentState = useContentState();

    if (contentState === 'loading') return <Loading />;

    if (contentState === 'welcome' || contentState === 'error') return <Welcome />;

    if (contentState === 'content') return (
        <Tab.Navigator screenOptions={{ tabBarStyle: { display: "none" } }} initialRouteName='Wallet'>
            <Tab.Screen name='Id' component={QR} initialParams={{ actionType: "person" }} />
            <Tab.Screen name='Wallet' component={Wallet} />
            <Tab.Screen name='Scanner' component={QRScanner} />
        </Tab.Navigator>
    );

    else return null;
}

该组件运行基本正常，但存在一个问题：当contentState切换为'content'时，Tab.Navigator的initialRouteName='Wallet'未生效，默认显示的是Id页面。我知道调整Tab.Screen的顺序可以解决，但从用户体验角度不希望这么做。

我推测原因是之前显示的Welcome组件中包含另一个Tab.Navigator，代码如下：

const Tab = createMaterialTopTabNavigator<WelcomeNavigationParamList>();

export default function Welcome() {

    const navigator = useNavigation();
    const currentRoute = useNavigationState(state => {

        if (!state) return;

        const route = state.routes[state.index];
        return route.name;
    });

    const goToLogin = () => {
        navigator.navigate('Login');
    }

    return (
        <View style={StyleSheet.absoluteFill}>
            <Tab.Navigator screenOptions={{ tabBarStyle: { display: "none" } }}>
                <Tab.Screen name='Hello' component={Hello} />
                <Tab.Screen name='Introduction' component={Introduction} />
                <Tab.Screen name='Explanation' component={Explanation} />
                <Tab.Screen name='Login' component={Login} />
            </Tab.Navigator>
            {currentRoute !== 'Login' && <Text style={styles.button} onPress={goToLogin}>Login / Register</Text>}
        </View>
    );
}

这个前置的导航组件可能导致React Navigation无法应用initialRouteName。请问该如何修复这个问题？

解决方案 #

原因分析 #

React Navigation的同类型导航器实例会默认复用内部导航状态（比如路由索引）。当从Welcome的Tab导航切换到PagesManager的Tab导航时，两者都是createMaterialTopTabNavigator创建的实例，之前的导航状态被意外继承，导致initialRouteName配置被忽略。

具体修复方法 #

1. 给导航器设置唯一id（推荐）

通过为两个Tab导航器添加唯一的id属性，明确区分不同的导航器实例，避免状态复用：

修改PagesManager中的Tab导航器：

<Tab.Navigator
  id="content-tab-nav" // 唯一标识
  screenOptions={{ tabBarStyle: { display: "none" } }}
  initialRouteName='Wallet'
>
  <Tab.Screen name='Id' component={QR} initialParams={{ actionType: "person" }} />
  <Tab.Screen name='Wallet' component={Wallet} />
  <Tab.Screen name='Scanner' component={QRScanner} />
</Tab.Navigator>

修改Welcome中的Tab导航器：

<Tab.Navigator
  id="welcome-tab-nav" // 唯一标识
  screenOptions={{ tabBarStyle: { display: "none" } }}
>
  <Tab.Screen name='Hello' component={Hello} />
  <Tab.Screen name='Introduction' component={Introduction} />
  <Tab.Screen name='Explanation' component={Explanation} />
  <Tab.Screen name='Login' component={Login} />
</Tab.Navigator>

2. 手动重置导航状态

如果设置id无效，可以在contentState切换到'content'时，强制重置导航路由到目标页面：

修改PagesManager组件：

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

export default function PagesManager() {
    let contentState = useContentState();
    const navigation = useNavigation();

    useEffect(() => {
        if (contentState === 'content') {
            // 重置路由到Wallet
            navigation.reset({
                index: 0,
                routes: [{ name: 'Wallet' }],
            });
        }
    }, [contentState, navigation]);

    if (contentState === 'loading') return <Loading />;

    if (contentState === 'welcome' || contentState === 'error') return <Welcome />;

    if (contentState === 'content') return (
        <Tab.Navigator screenOptions={{ tabBarStyle: { display: "none" } }} initialRouteName='Wallet'>
            <Tab.Screen name='Id' component={QR} initialParams={{ actionType: "person" }} />
            <Tab.Screen name='Wallet' component={Wallet} />
            <Tab.Screen name='Scanner' component={QRScanner} />
        </Tab.Navigator>
    );

    else return null;
}

3. 使用不同类型的导航器（极端情况）

若前两种方法都不生效，可以为两个页面使用不同类型的导航器（比如Welcome用createMaterialTopTabNavigator，PagesManager用createBottomTabNavigator），彻底避免同类型导航器的状态复用问题。

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