如何重启React Native中@react-navigation/bottom-tabs的所有页面？

问题描述 #

我正在开发一个基于React Native + TypeScript的安卓和iOS移动应用，包含5个功能随用户登录状态变化的页面。在第5个用户页面中，用户可执行登录或登出操作，此时我希望所有页面（含用户页面）全部重启。请问如何触发@react-navigation/bottom-tabs重启其所有页面？

我目前使用react-native-restart包，但该方案存在延迟，且在iOS端会导致应用短暂冻结。

导航栏代码如下：

import {
    BottomTabNavigationOptions, BottomTabScreenProps, createBottomTabNavigator
} from "@react-navigation/bottom-tabs";
import { NavigationContainer, ParamListBase } from "@react-navigation/native";
import { createNativeStackNavigator, NativeStackScreenProps } from "@react-navigation/native-stack";

...

render(): ReactNode {
    const Tab = createBottomTabNavigator<Stacks>(),
            Stack = createNativeStackNavigator<UserScreenStack>();

    return <>
        <NavigationContainer>
            <Tab.Navigator
                initialRouteName="HOME" backBehavior="history"
                screenOptions = {...}
            >

                <Tab.Screen
                    name="HOME"
                    children={(props: BottomTabScreenProps<ParamListBase>): ReactNode => {
                        return <HomePage navigation={props.navigation} />;
                    }}
                />

                <Tab.Screen
                    name="SEARCH"
                    children={(props: BottomTabScreenProps<ParamListBase>): ReactNode => {
                        return <SearchPage navigation={props.navigation} />;
                    }}
                />

                <Tab.Screen
                    name="PRODUCTION"
                    children={(props: BottomTabScreenProps<ParamListBase>): ReactNode => {
                        return <ProductionPage navigation={props.navigation} />;
                    }}
                />

                <Tab.Screen
                    name="SPOTLIGHT"
                    children={(props: BottomTabScreenProps<ParamListBase>): ReactNode => {
                        return <SpotlightPage navigation={props.navigation} />;
                    }}
                />

                <Tab.Screen
                    name="USER"
                    children={(): ReactNode => {
                        return <>
                            <Stack.Navigator initialRouteName="USER.LOGIN" screenOptions={{ headerShown: false }}>
                                <Stack.Screen
                                    name="USER.LOGIN"
                                    children={(props: NativeStackScreenProps<ParamListBase>): ReactNode => {
                                        return <LoginPage navigation={props.navigation} />;
                                    }}
                                />
                                <Stack.Screen
                                    name="USER.PROFILE"
                                    children={(props: NativeStackScreenProps<ParamListBase>): ReactNode => {
                                        return <UserPage navigation={props.navigation} />;
                                    }}
                                />
                            </Stack.Navigator>
                        </>;
                    }}
                />

            </Tab.Navigator>
        </NavigationContainer>
    </>;
}

解决方案 #

不需要依赖第三方重启应用的包，通过React Navigation自身的机制就能实现页面全量重启，且体验更流畅：

1. 绑定登录状态到NavigationContainer的key #

React组件会在key属性变化时完全重新渲染，将用户登录状态作为NavigationContainer的key，状态切换时整个导航容器会重新初始化，所有页面都会重新挂载。

修改导航代码：

// 假设你通过useState或状态管理工具维护登录状态
const [isLoggedIn, setIsLoggedIn] = useState(false);

render(): ReactNode {
    const Tab = createBottomTabNavigator<Stacks>(),
          Stack = createNativeStackNavigator<UserScreenStack>();

    return <>
        {/* 用登录状态区分key */}
        <NavigationContainer key={isLoggedIn ? 'auth' : 'guest'}>
            <Tab.Navigator
                initialRouteName="HOME" backBehavior="history"
                screenOptions = {...}
            >
                {/* 原有Tab.Screen代码 */}
            </Tab.Navigator>
        </NavigationContainer>
    </>;
}

2. 重置Tab导航的所有路由栈 #

如果不想重启整个导航容器，可以通过reset方法重置每个Tab的路由，强制页面重新初始化：

在登录/登出操作的组件中（比如LoginPage或UserPage）添加重置逻辑：

import { useNavigation } from '@react-navigation/native';
import { BottomTabNavigationProp } from '@react-navigation/bottom-tabs';

// 定义你的Tab参数列表类型
type TabParamList = {
  HOME: undefined;
  SEARCH: undefined;
  PRODUCTION: undefined;
  SPOTLIGHT: undefined;
  USER: undefined;
};

const LoginPage = () => {
  const navigation = useNavigation<BottomTabNavigationProp<TabParamList>>();

  const handleLogin = async () => {
    // 执行登录逻辑...
    await loginApi();
    // 重置所有Tab路由
    navigation.reset({
      index: 0,
      routes: [
        { name: 'HOME' },
        { name: 'SEARCH' },
        { name: 'PRODUCTION' },
        { name: 'SPOTLIGHT' },
        { name: 'USER' },
      ],
    });
    // 更新登录状态
    setIsLoggedIn(true);
  };

  return <>{/* 登录UI */}</>;
};

3. 优化User页面的嵌套Stack导航 #

确保User页面的嵌套Stack能根据登录状态自动切换初始路由：

<Tab.Screen
    name="USER"
    children={(): ReactNode => {
        return <>
            <Stack.Navigator 
                initialRouteName={isLoggedIn ? "USER.PROFILE" : "USER.LOGIN"} 
                screenOptions={{ headerShown: false }}
            >
                <Stack.Screen
                    name="USER.LOGIN"
                    children={(props: NativeStackScreenProps<ParamListBase>): ReactNode => {
                        return <LoginPage navigation={props.navigation} />;
                    }}
                />
                <Stack.Screen
                    name="USER.PROFILE"
                    children={(props: NativeStackScreenProps<ParamListBase>): ReactNode => {
                        return <UserPage navigation={props.navigation} />;
                    }}
                />
            </Stack.Navigator>
        </>;
    }}
/>

方案优势 #

相比react-native-restart，以上方法都是在React Navigation内部处理页面重置，属于前端层面的状态更新，不会重启整个应用进程，避免了iOS端的冻结和延迟问题，性能和用户体验更优。

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