Я делаю приложение в React Native и пытаюсь реализовать функцию, которая изменит цвет заголовка, а затем сразу же увидит изменение.
Я устанавливаю цвет заголовка равным значению в глобальной таблице стилей. Когда я изменяю переменную цвета в таблице стилей, меню не меняет цвет, пока я не перейду на новую страницу.
У меня есть глобальная таблица стилей, которую я импортирую и использую везде в своем приложении.
var globalStyles = Stylesheet.create({
menuHex: {
backgroundColor: '#6ed168'
}
...other styles...
})
В меню используется следующий код. Переменная 'DrawerStack' в строке 2 содержит все мои экраны, но это не важно. В строке 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() завершена.
Любая помощь приветствуется
