React Native 主动更改 StackNavigator 标题颜色答案

【问题标题】：React Native Actively Changing a StackNavigator Header ColorReact Native 主动更改 StackNavigator 标题颜色
【发布时间】：2018-09-12 05:31:54
【问题描述】：

更新：

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

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

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

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

菜单使用以下代码。第 2 行的变量“DrawerStack”上有我所有的屏幕，但这并不重要。在第 6 行，我使用来自上一个代码 sn-p 中的样式表的变量“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 变量”的十六进制值

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()，但没有成功

感谢您提供更多帮助

【问题讨论】：

标签： react-native styles dynamic-programming background-color stack-navigator

【解决方案1】：

你已经将 setStyle() 定义为一个异步函数（所以它返回一个 Promise），你为什么不简单地做这样的事情：

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

【讨论】：

感谢您的回复！我不能这样做。 'await' 是保留关键字，因此我必须将第二行替换为 setStyle() 的内容（仅尝试中的内容，不包括返回）。即使这样，我也会收到“模块 AppRegistry 不是注册的可调用模块”错误。即使这样，在 try catch 语句中包围文件的主要内容似乎也是糟糕的代码

【解决方案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>     
    )
  }
}

这可能不是某些人想要的，但这种方法让我能够解决我最初的问题。

【讨论】：