Как обновить действие влево и действие вправо в реакции навигации?

Question

В приложении expo sdk 36 (React-Native) у меня есть панель приложений с двумя действиями, левым и правым.

Я установил их в своей конфигурации routes.js файл.

Это мой компонент, отвечающий за обновление этих действий при изменении маршрута, он помещается между каждым <Screen /> и моим <Views />: Screen > AppBarActionsProviderScreenWrapper > View

import { useEffect, createElement } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import {
  appBarLeftActionsChange as appBarLeftActionsChangeAction,
  appBarRightActionsChange as appBarRightActionsChangeAction,
} from '../reducers/app/layoutReducer/actions';

function AppBarActionsProviderScreenWrapper({
  left,
  right,
  component,
  appBarLeftActionsChange,
  appBarRightActionsChange,
  location,
  route,
  ...rest
}) {
  useEffect(() => {
    appBarLeftActionsChange(left);
    appBarRightActionsChange(right);
  }, [component, left, right, location, route]);
  return createElement(component, { ...rest, location, route });
}

AppBarActionsProviderScreenWrapper.propTypes = {
  /** appBarActions.left passed from routes configuration */
  left: PropTypes.array,
  /** appBarActions.right passed from routes configuration */
  right: PropTypes.array,
  /** Component view used within Screen */
  component: PropTypes.elementType.isRequired,
  /** @ignore */
  appBarLeftActionsChange: PropTypes.func.isRequired,
  /** @ignore */
  appBarRightActionsChange: PropTypes.func.isRequired,
};

AppBarActionsProviderScreenWrapper.defaultProps = {
  left: [],
  right: [],
};

const mapDispatchToProps = (dispatch) => ({
  appBarLeftActionsChange: (appBarLeftActions) => dispatch(appBarLeftActionsChangeAction(appBarLeftActions)),
  appBarRightActionsChange: (appBarRightActions) => dispatch(appBarRightActionsChangeAction(appBarRightActions)),
});

export default connect(undefined, mapDispatchToProps)(AppBarActionsProviderScreenWrapper);

Это AppBar.js:

class AppBar extends React.Component {
  render() {
    // ....
    return (
      <Animated.View style={[styles.container, { left: this.animatedLeft }]}>
        <IosPwaFix />
        <Header
          style={styles.header}
          isDark
          statusBarHeight={Constants.statusBarHeight}
          {...rest}
        >
          <View style={styles.controlWidth}>
            {appBarLeftActions.map((Action) => <Action key={Action.displayName} />)}
          </View>
          <Content
            title={logo !== false && <Logo inverse={logoInverse} />}
            style={styles.logoWrapper}
          />
          <View style={[styles.controlWidth]}>
            {appBarRightActions.map((Action) => <Action key={Action.displayName} />)}
          </View>
        </Header>
      </Animated.View>
    );
  }
}

const mapStateToProps = createStructuredSelector({
  appBarLeftActions: selectAppBarLeftActions,
  appBarRightActions: selectAppBarRightActions,
  hasDrawer: selectHasDrawer,
});


AppBar.defaultProps = {
  myOptions: {},
};

const ConnectedAppBar = compose(
  withNavigation,
  withTheme,
  connect(mapStateToProps),
)(AppBar);

/** AppBar is required to be function and not component by react-navigation */
export default (props) => <ConnectedAppBar {...props} />;

Кажется, что реакция-навигация не unmount / remount видов, из-за которых действие не отображается.

Иногда я могу нажать кнопку «Назад», пока ничего не останется в история.

Как я могу обновить свои действия при изменении страницы в React Navigation 5?