Question

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

我将标题的颜色设置为等于全局样式表中的值。当我更改样式表中的颜色变量时，菜单不会改变颜色，直到我导航到新页面。

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

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

菜单使用以下代码。第2行的变量'DrawerStack'上面有我的所有屏幕，但这并不重要。在第6行，我使用变量'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（）函数完成时更改菜单标题的颜色。

感谢任何帮助

Answer 1

这是我的代码。这对我有用！

将 mainColor 替换为您需要的颜色！

static navigationOptions = {
    title: strings('auth.btnLogin'),
    headerMode:"float",
    headerStyle: {
        backgroundColor: mainColor,
        elevation: null
    },

    headerTitleStyle: {
        fontWeight: '300',
        color: '#ffffff',
        fontSize: 20,
        flex:1,
        textAlign:"center"
    },
    // headerLeft: null
    backTitle: "Back",
    headerTintColor: '#fff',      
}

React Native更改StackNavigator标题颜色

1 个答案: