如何在react native bottomTabNavigator中的每个选项卡内重置选项卡更改时的堆栈？

import { createBottomTabNavigator } from 'react-navigation';

class CustomTabNavigator extends React.Component {
  componentDidUpdate(prevProps) {
    // 当选项卡切换时，检查当前选项卡是否发生变化
    if (prevProps.navigation.state.index !== this.props.navigation.state.index) {
      // 获取当前选项卡的路由名称
      const routeName = this.props.navigation.state.routes[this.props.navigation.state.index].routeName;
      
      // 重置当前选项卡的堆栈导航状态
      this.props.navigation.dispatch(
        StackActions.reset({
          index: 0,
          actions: [
            NavigationActions.navigate({ routeName }),
          ],
        })
      );
    }
  }

  render() {
    // 返回BottomTabNavigator的渲染结果
    return (
      <BottomTabNavigator {...this.props} />
    );
  }
}

import { createAppContainer } from 'react-navigation';

// 导入需要在选项卡中显示的屏幕组件
import Screen1 from './Screen1';
import Screen2 from './Screen2';
import Screen3 from './Screen3';

// 创建底部选项卡导航器
const TabNavigator = createBottomTabNavigator({
  Screen1: { screen: Screen1 },
  Screen2: { screen: Screen2 },
  Screen3: { screen: Screen3 },
});

// 创建App容器并使用自定义的TabNavigator组件
const AppContainer = createAppContainer(CustomTabNavigator);