React Navigation：点击抽屉分类后如何用新参数加载同一屏幕？

先帮你理清问题根源：

• 当用navigate('Home', ...)跳转到已在导航栈中的页面时，React Navigation不会重新创建组件实例，所以componentDidMount只会触发一次，新参数自然无法触发数据刷新。
• 你碰到的push报错，是因为Home直接在Drawer导航下，而push是Stack导航的专属API，Drawer本身不支持这个方法。
• 你的临时方案用了弃用的willFocus事件，还没正确处理订阅取消（componentWillUnmount里只是写了this.forceRerender，没调用取消函数），另外中间页完全是多余的，只会增加复杂度。

下面给你几个更优雅的解决方案，按推荐程度排序：

方案一：直接在Home组件监听焦点事件+更新参数 #

这个方案不需要改动导航结构，直接在Home类组件里调整：

1. 替换弃用的willFocus为官方推荐的focus事件，同时正确处理订阅清理：

componentDidMount() {
  // 保存取消订阅的函数，组件卸载时清理
  this._unsubscribe = this.props.navigation.addListener('focus', () => {
    // 获取最新分类参数
    const currentCategory = this.props.navigation.getParam('category', 0);
    // 避免重复请求：仅分类变化时刷新数据
    if (currentCategory !== this.state.category) {
      this.setState({ category: currentCategory }, () => {
        this.getJokes(currentCategory, 1);
      });
    }
  });

  // 保留初始化时的数据请求
  const initCategory = this.props.navigation.getParam('category', 0);
  this.getJokes(initCategory, 1);
}

componentWillUnmount() {
  // 必须调用取消订阅函数，防止内存泄漏
  this._unsubscribe();
}

2. 抽屉里的点击事件不用再navigate到Home，直接更新当前页面参数即可：

<Drawer.Item 
  label={category.name} 
  key={category.id} 
  active={global.activeCategory == category.id} 
  onPress={() => {
    // 直接更新Home页面的参数
    this.props.navigation.setParams({ category: category.id });
    // 更新全局activeCategory状态
    global.activeCategory = category.id;
    this.props.navigation.closeDrawer();
  }} 
/>

方案二：改用函数组件+官方hooks（推荐长期方案） #

如果项目可以改用函数组件，React Navigation提供了更简洁的hooks处理这种场景：

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

function HomeScreen({ navigation }) {
  const route = useRoute();
  // 用useState保存当前分类，初始值取路由参数
  const [currentCategory, setCurrentCategory] = useState(route.params?.category || 0);

  // useFocusEffect在页面获得焦点时触发，useCallback避免重复创建函数
  useFocusEffect(
    useCallback(() => {
      const newCategory = route.params?.category || 0;
      if (newCategory !== currentCategory) {
        setCurrentCategory(newCategory);
        // 调用获取数据的方法
        getJokes(newCategory, 1);
      }
    }, [route.params, currentCategory])
  );

  // 定义getJokes函数
  const getJokes = async (categoryId, page) => {
    // 你的数据请求逻辑
  };

  return (
    {/* 你的页面渲染内容 */}
  );
}

抽屉里的onPress和方案一一致，用setParams更新参数即可。

方案三：调整导航结构，用Stack嵌套Drawer #

如果一定要用push或replace的方式，可以把Home放在Stack导航里，再将这个Stack作为Drawer的子屏幕：

1. 修改导航结构：

import { createStackNavigator } from '@react-navigation/stack';
import { createDrawerNavigator } from '@react-navigation/drawer';

const Stack = createStackNavigator();
const Drawer = createDrawerNavigator();

// 创建Home的Stack导航
function HomeStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={HomeScreen} />
    </Stack.Navigator>
  );
}

// 根导航用Drawer，把HomeStack作为其中一个屏幕
function AppNavigator() {
  return (
    <NavigationContainer>
      <Drawer.Navigator>
        <Drawer.Screen name="HomeStack" component={HomeStack} />
        {/* 其他抽屉项 */}
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

2. 抽屉里的点击事件用replace（避免栈中积累多个Home页面）：

onPress={() => {
  this.props.navigation.replace('Home', { category: category.id });
  this.props.navigation.closeDrawer();
}}

这样每次点击分类都会替换栈里的Home页面，触发componentDidMount重新加载数据。

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