反应天然会主动更改堆叠式标头颜色

Question

更新：

我没有在上一个问题上取得进展，所以我正在更改它，希望我可以找到另一个答案

我正在在React Native中进行应用程序，并且我正在尝试实现一项功能，该功能将更改标头的颜色，然后立即看到更改。

我有一个全球样式表，我在应用程序中无处不在

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

菜单使用以下代码。第2行上的变量"抽屉"都在上面有我所有的屏幕，但这并不重要。在第6行上，我使用我的最后一个代码shippet中的样式表

中使用的变量'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>
})

}(

i然后具有此功能来更改'Menuhex变量'的十六进制值'

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

您已将setStyle((定义为异步函数(因此它返回承诺(，您为什么不简单地做这样的事情：

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

Answer 2

很抱歉提出与此类似的另一个问题。我之前的问题是如何在继续之前将异步存储封锁，因为这不是以前。以下是我的代码。

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>     
    )
  }
}

这可能不是某些人想要的，但是这种方法使我可以解决我的原始问题。