React Native底部导航中HelpScreen为何保留之前的路由参数？

我学习React和React Native还不到一周，正在学习相关概念。用@react-navigation/material-bottom-tabs和react-native-paper开发了一个带底部标签导航的应用，包含Home、Details、Help三个页面。Home和Details页面都有「请求帮助」按钮，点击后会跳转到HelpScreen并传递txt参数，示例代码如下：

<Button
  icon="camera"
  mode="contained"
  onPress={() => navigation.navigate("Help", { txt: "Everything is OK!" })}
  style={{ marginTop: 16 }}
>
  Ask for help
</Button>

应用加载时，HelpScreen通过initialParams={{ txt: "nothing" }}初始化，显示「You said nothing」。当从HomeScreen点击按钮跳转到HelpScreen后，页面显示「You said Everything is OK!」；但切换到其他页面再通过底部标签返回HelpScreen时，我期望页面重置为初始值「You said nothing」，但实际仍保留之前的参数值。我没有在HelpScreen中使用useState保存参数，不理解为何组件没有重置参数，或者是否组件没有重渲染。

完整代码如下：

import { registerRootComponent } from "expo";
import { NavigationContainer } from "@react-navigation/native";
import { NativeStackScreenProps } from "@react-navigation/native-stack";
import { createMaterialBottomTabNavigator } from "@react-navigation/material-bottom-tabs";
import { View } from "react-native";
import { Button, Text } from "react-native-paper";
import { SafeAreaProvider } from "react-native-safe-area-context";
import MaterialCommunityIcons from "react-native-vector-icons/MaterialCommunityIcons";

type NavigationParamList = {
  Home: undefined;
  Details: undefined;
  Help: { txt: string };
};

type PropsHome = NativeStackScreenProps<NavigationParamList, "Home">;
type PropsDetails = NativeStackScreenProps<NavigationParamList, "Details">;
type PropsHelp = NativeStackScreenProps<NavigationParamList, "Help">;

const Tab = createMaterialBottomTabNavigator<NavigationParamList>();

function HomeScreen({ navigation, route }: PropsHome) {
  console.log("HOME");
  return (
    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <Text>Route name: {route.name}</Text>
      <Button
        icon="camera"
        mode="contained"
        onPress={() =>
          navigation.navigate("Help", { txt: "Everything is OK!" })
        }
        style={{ marginTop: 16 }}
      >
        Ask for help
      </Button>
    </View>
  );
}

function DetailsScreen({ navigation, route }: PropsDetails) {
  console.log("DETAILS");
  return (
    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <Text>Route name: {route.name}</Text>
      <Button
        icon="camera"
        mode="contained"
        onPress={() => navigation.navigate("Help", { txt: "HELP ME!" })}
        style={{ marginTop: 16 }}
      >
        Ask for help
      </Button>
    </View>
  );
}

function HelpScreen({ route }: PropsHelp) {
  console.log("HELP");
  return (
    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <Text>Route name: {route.name}</Text>
      <Text>You said {route.params.txt}</Text>
    </View>
  );
}

export default function App() {
  return (
    <SafeAreaProvider>
      <NavigationContainer>
        <Tab.Navigator initialRouteName="Home" screenOptions={{}}>
          <Tab.Screen
            name="Home"
            options={{
              tabBarIcon: ({ color }) => (
                <MaterialCommunityIcons name="home" color={color} size={26} />
              ),
            }}
            component={HomeScreen}
          />
          <Tab.Screen
            name="Details"
            options={{
              tabBarIcon: ({ color }) => (
                <MaterialCommunityIcons
                  name="alien-outline"
                  color={color}
                  size={26}
                />
              ),
            }}
            component={DetailsScreen}
          />
          <Tab.Screen
            name="Help"
            options={{
              tabBarIcon: ({ color }) => (
                <MaterialCommunityIcons
                  name="chat-question-outline"
                  color={color}
                  size={26}
                />
              ),
            }}
            component={HelpScreen}
            initialParams={{ txt: "nothing" }}
          />
        </Tab.Navigator>
      </NavigationContainer>
    </SafeAreaProvider>
  );
}

registerRootComponent(App);

原因解释 #

React Navigation的底部标签导航器默认会保留每个标签页的组件实例和路由状态：

• HelpScreen组件只会在第一次切换到该标签时挂载一次，后续切换标签不会重新创建组件实例，也就不会触发重新初始化。
• initialParams仅在组件第一次挂载时生效，后续不会自动覆盖已修改的路由参数。
• 路由参数由导航器内部维护，即便你没使用useState保存，参数值也会保持最后一次修改的状态，不会自动重置。

解决方案 #

有两种简单的方法实现返回Help标签时重置参数：

方法1：监听标签点击事件，手动传递初始参数

修改Help页面的screenOptions，添加tabPress事件监听，每次点击标签时主动传递初始参数：

<Tab.Screen
  name="Help"
  options={{
    tabBarIcon: ({ color }) => (
      <MaterialCommunityIcons
        name="chat-question-outline"
        color={color}
        size={26}
      />
    ),
    tabPress: (e) => {
      e.preventDefault(); // 阻止默认跳转行为
      e.navigation.navigate("Help", { txt: "nothing" }); // 传递初始参数跳转
    },
  }}
  component={HelpScreen}
  initialParams={{ txt: "nothing" }}
/>

方法2：监听页面焦点，重置参数

使用React Navigation的useFocusEffect钩子，每次Help页面获得焦点时重置路由参数：

1. 先导入所需钩子：

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

2. 修改HelpScreen组件：

function HelpScreen({ route, navigation }: PropsHelp) {
  console.log("HELP");

  useFocusEffect(
    useCallback(() => {
      // 每次页面聚焦时重置参数
      navigation.setParams({ txt: "nothing" });
    }, [navigation])
  );

  return (
    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <Text>Route name: {route.name}</Text>
      <Text>You said {route.params.txt}</Text>
    </View>
  );
}

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