React Native主动更改StackNavigator标头颜色 [英] React Native Actively Changing a StackNavigator Header Color

问题描述

更新:

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

I'm not making progress with the previous question, so I'm changing it hoping I could find another answer

我正在React Native中创建一个应用程序，并且我正在尝试实现一个功能，该功能将更改标题的颜色，然后立即看到更改.

I'm making an application in React Native, and I'm trying to implement a feature that will change the color of the header and then immediately see the change.

我有一个全局样式表，可以在我的应用程序中的任何地方导入和使用

I have a global style sheet that I import and use everywhere in my app

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

菜单使用以下代码.第2行上的变量'DrawerStack'上面有我所有的屏幕，但这并不重要.在第6行中，我使用了最后一个代码段中来自样式表的变量"globalStyles.menuHex"

The menu uses the following code. The Variable 'DrawerStack' on line 2 has all my screens on it, but that's not important. On line 6 I use the variable 'globalStyles.menuHex' that comes from the style sheet in my last code snippet

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变量'的十六进制值

I then have this function to change the hex value of the '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()，该方法不起作用

My problem is that when the 'menuHex' variable is changed, the change does not show until after I hit the menu toggle button or until I change pages. I want it so that the color of the header of the menu will be changed when the changetheme() function is complete. I tried running this.forceUpdate(), which did not work

感谢您提供任何帮助

推荐答案

提出另一个与此类似的问题的道歉.我之前的问题是如何在继续之前阻止异步存储，因为它不是以前.下面是我的代码.

Apologies for making another question similar to this. My previous question was how to get Async Storage to block before continuing, because it wasn't before. Below was my code.

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

What I ended up doing was creating a "Loading Page," which ran the function above on startup and then after it was done setting the style.menuHex variable, it changed to the 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>     
    )
  }
}

这可能不是某些人想要的，但是这种方法使我可以解决最初的问题.

This may not be what some people are looking for, but this method allowed me to fix my original problems.

这篇关于React Native主动更改StackNavigator标头颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！