Реагирование загрузки статических NavOptions после параметров по умолчанию

Question

Всякий раз, когда я переключаюсь в темный режим в своем приложении, и приложение пытается загрузить компонент навигации, оно всегда сначала загружает компонент конфигурации по умолчанию из AppNavigator.js, а затем загружает статическую конфигурацию navigationOptions, и это выглядит действительно странно.

Я пробовал настраивать только параметры статической навигации на каждом экране, но это вызовет ту же проблему, за исключением того, что будут отображаться предустановленные параметры навигации. Я также пробовал разные подходы с точки зрения вложения моих навигаторов, но это тоже не работает. Я попытался использовать реактивный редукс в AppNavigator.js, но это тоже не работает, так как вы не можете использовать this.props вне React Component

Параметры статической навигации любого компонента экрана выглядят следующим образом:

// imports 
{ ... }

class HomeView extends React.Component {
  state = { currentUser: null }

  componentDidMount() {
    const { currentUser } = firebase.auth();
    this.setState({ currentUser }); 
  }

  constructor(props) {
    super(props);
  }

  componentWillMount = () => {
    const {setParams} = this.props.navigation;
    setParams({darkModeOn: this.props.darkMode});
  }

  static navigationOptions = ({ navigation }) => {
    const { state } = navigation;

    if (state.params != undefined) {
      return {
        headerTitleStyle: {
          fontFamily: "OpenSans-SemiBold"
        },  
        headerTintColor: state.params.darkModeOn ? "#FFFFFF" : "#000000",
        headerStyle: {
          shadowOffset: { width: 0, height: 1 },
          shadowOpacity: 0.6,
          shadowRadius: 2,
          elevation: 1,
          fontSize: 10, 
          marginTop: Platform.OS === "ios" ? 0 : 20
        },  
        tabBarOptions: {
          activeTintColor: state.params.darkModeOn ? "#FFFFFF" : "#000000",
          inactiveTintColor: state.params.darkModeOn ? "#333333" : "#E0E0E0",
          pressOpacity: 1,
          showIcon: true,
          showLabel: false,
          style: {
            shadowOffset: {
              width: 0,
              height: 2
            },
            shadowOpacity: 0.6,
            shadowRadius: 4,
            elevation: 4,
            backgroundColor: state.params.darkModeOn ? "#000000" : "#FFFFFF"
          }
        },
      };
    } 
  };

// render()
{ ... }

Вот так выглядит мой AppNavigator.js

// Bottom Tab Navigation
const TabNav = createBottomTabNavigator(
{
  Home: { screen: Home},
  Lists: { screen: Lists}, 
  Bookmarks: { screen: Bookmarks},
  Profile: { screen: Profile},
  Settings: {screen: Settings},
},
{
    defaultNavigationOptions: ({ navigation }) => ({
      tabBarIcon: ({ focused, horizontal, tintColor }) => {
        const { routeName } = navigation.state;
        let IconComponent = Ionicons;
        let iconName; 
        if (routeName === 'Home') {
          iconName = `${focused ? 'ios' : 'md'}-home`;
        } else if (routeName === 'Lists') {
          iconName = `ios-list${focused ? '-box' : ''}`;
        } else if (routeName === 'Bookmarks') {
          iconName =`ios-bookmarks`;
        } else if (routeName === 'Profile') {
          iconName =`ios-analytics`;
        } else if (routeName === 'Settings') {
          iconName = `ios-settings`
        }

        return <IconComponent name={iconName} size={25} color={tintColor} />;
      },
    }), 
    tabBarOptions: {
      activeTintColor: '#000000',
      inactiveTintColor: '#E0E0E0',
      showLabel: false,
      tabStyle: {
        backgroundColor: '#FFFFFF',
      }
    },
}
);

Я бы ожидал, что он будет загружаться напрямую из статических параметров моего текущего экрана, но, похоже, нет способа, по крайней мере, такого, который мне известен. Это видео о том, как выглядит проблема. https://streamable.com/kda2o