Question

更新

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

我在React Native中创建了一个应用程序，我试图实现一个可以改变标题颜色的功能，然后立即看到更改。

我有一个全局样式表，我在我的应用程序中随处导入和使用

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

菜单使用以下代码。变量＆＃39; DrawerStack＆＃39;在第2行上有我的所有屏幕，但这并不重要。在第6行，我使用变量＆＃39; globalStyles.menuHex＆＃39;来自我上一个代码段中的样式表

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

}）

然后我有这个功能来改变＆＃39; menuHex变量的十六进制值＆＃39;

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

    } 

}

我的问题是当＆＃39; menuHex＆＃39;变量已更改，直到我点击菜单切换按钮或直到我更改页面后才会显示更改。我想要它，以便在changetheme（）函数完成时更改菜单标题的颜色。我试过运行this.forceUpdate（），它不起作用

感谢任何更多帮助

Answer 1

你已经将setStyle（）定义为异步函数（所以它返回一个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)
    }
};

我最终做的是创建一个“加载页面”，它在启动时运行上面的功能，然后在完成设置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标题颜色

2 个答案: