Реагируй Собственно Активно Изменяя Цвет Заголовка StackNavigator

Question

ОБНОВИТЬ:

Я не продвигаюсь по предыдущему вопросу, поэтому я изменяю его, надеясь найти другой ответ

Я делаю приложение в React Native и пытаюсь реализовать функцию, которая изменит цвет заголовка, а затем сразу же увидит изменение.

У меня есть глобальная таблица стилей, которую я импортирую и использую везде в своем приложении

var globalStyles = Stylesheet.create({
    menuHex: {
        backgroundColor: '#6ed168'
    }
    ...other styles...
})

В меню используется следующий код. Переменная DrawerStack в строке 2 содержит все мои экраны, но это не важно. В строке 6 я использую переменную globalStyles.menuHex из таблицы стилей в моем последнем фрагменте кода.

const DrawerNavigation = StackNavigator({
    DrawerStack: {screen: DrawerStack },
}, {
    headerMode:'float',
    navigationOptions: ({navigation}) => ({
        headerStyle: globalStyles.menuHex,
        title: 'Application',
        headerTintColor: 'black',
        headerLeft: <TouchableOpacity onPress={() => {
                    navigation.navigate('DrawerToggle')
                    }}>
                       <Image source = {menuIcon}/>
                  </TouchableOpacity>
})

})

Затем у меня есть эта функция, чтобы изменить шестнадцатеричное значение 'menuHex variable'

changetheme(itemValue){
    this.setState({theme: itemValue})
    if(itemValue === 'spring'){
      globalStyles.menuHex = {backgroundColor: '#6ed168'}        
    }
    else if(itemValue === 'summer'){
      globalStyles.menuHex = {backgroundColor: '#ffff00'}
    }
    else if(itemValue === 'autumn'){
      globalStyles.menuHex = {backgroundColor: '#ffa500'}
    }
    else if(itemValue === 'winter'){
      globalStyles.menuHex = {backgroundColor: '#ADD8E6'}

    } 

}

Моя проблема заключается в том, что при изменении переменной menuHex это изменение не отображается до тех пор, пока я не нажму кнопку переключения меню или пока не изменю страницы. Я хочу, чтобы цвет заголовка меню был изменен после завершения функции changetheme(). Я попытался запустить this.forceUpdate(), который не работал

Любая дополнительная помощь приветствуется

Answer 1

Извиняюсь за создание другого вопроса, похожего на этот. Мой предыдущий вопрос был о том, как заставить Async Storage заблокировать перед продолжением, потому что этого не было раньше. Ниже был мой код.

import globalStyles from './src/style'

setStyle = async () => {
    try{
      const itemValue =  await AsyncStorage.getItem('app_theme')
      if(itemValue == null){
        AsyncStorage.setItem('app_theme', 'spring')
        globalStyles.menuHex = {backgroundColor: '#6ed168'}
      }
      else{
        if(itemValue === 'spring'){
          globalStyles.menuHex = {backgroundColor: '#6ed168'}        }
        else if(itemValue === 'summer'){
          globalStyles.menuHex = {backgroundColor: '#ffff00'}
        }
        else if(itemValue === 'autumn'){
          globalStyles.menuHex = {backgroundColor: '#ffa500'}
        }
        else if(itemValue === 'winter'){
          globalStyles.menuHex = {backgroundColor: '#ADD8E6'}
        } 
      }
    }
    catch(error){
      console.log(error)
    }
};

Я закончил тем, что создал "загрузочную страницу", которая запускала вышеописанную функцию при запуске, а затем, после того, как это было сделано, установив переменную style.menuHex, она изменилась на Home

class Loading extends Component{
  constructor(props){
    super(props);
    this.setStyle(props);
  }
  async setStyle(props){
      try{
        const itemValue =  await AsyncStorage.getItem('app_theme')
        console.log(itemValue)
        if(itemValue == null){
          AsyncStorage.setItem('app_theme', 'spring')
          globalStyles.menuHex = {backgroundColor: '#6ed168'}
        }
        else{
          this.changeTheme(itemValue)
        }

      }
      catch(error){
        console.log("yup error:\n")

        console.log(error)
      }
      props.navigation.navigate('Home') //***important line. I navigate after done setting variable
  };

  render(){
    return(
      <View>
          <Text>
            Loading
          </Text>
      </View>     
    )
  }
}

Возможно, это не то, что ищут некоторые люди, но этот метод позволил мне исправить мои первоначальные проблемы.

Answer 2

Вы определили setStyle() как асинхронную функцию (поэтому она возвращает Promise), почему бы вам просто не сделать что-то вроде этого:

try {
  await setStyle()
  {initialize stacks}
  AppRegistry.registerComponent(...);
} catch(error) {...}