React Native 主动更改 StackNavigator Header 颜色

Question

更新：

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

我正在 React Native 中制作一个应用程序，我正在尝试实现一项功能，该功能将更改 header 的颜色，然后立即看到更改。

我有一个全局样式 sheet，我在我的应用中随处导入并使用它

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

菜单使用以下代码。第 2 行的变量 'DrawerStack' 上有我所有的屏幕，但这并不重要。在第 6 行，我在最后一个代码片段

中使用了来自样式 sheet 的变量 '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() 函数完成时更改菜单 header 的颜色。我尝试了运行 this.forceUpdate()，但没有用

如有任何帮助，我们将不胜感激

Answer 1

您已将 setStyle() 定义为一个异步函数（因此它 returns 一个 Promise），您为什么不简单地做这样的事情：

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

我最后做的是创建一个 "Loading Page," 上面的运行函数，然后在完成设置 style.menuHex 变量后，它更改为主页

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

这可能不是某些人想要的，但这种方法让我解决了原来的问题。

React Native 主动更改 StackNavigator Header 颜色

React Native Actively Changing a StackNavigator Header Color

styles

dynamic-programming

background-color

react-native

stack-navigator