本文共 3448 字，大约阅读时间需要 11 分钟。
UPDATE:
I'm not making progress with the previous question, so I'm changing it hoping I could find another answer
I'm making an application in React Native, and I'm trying to implement a feature that will change the color of the header and then immediately see the change.
I have a global style sheet that I import and use everywhere in my app
var globalStyles = Stylesheet.create({
menuHex: {
backgroundColor: '#6ed168'
}
...other styles...
})
The menu uses the following code. The Variable 'DrawerStack' on line 2 has all my screens on it, but that's not important. On line 6 I use the variable 'globalStyles.menuHex' that comes from the style sheet in my last code snippet
const DrawerNavigation = StackNavigator({
DrawerStack: {screen: DrawerStack },
}, {
headerMode:'float',
navigationOptions: ({navigation}) => ({
headerStyle: globalStyles.menuHex,
title: 'Application',
headerTintColor: 'black',
headerLeft: {
navigation.navigate('DrawerToggle')
}}>
})
})
I then have this function to change the hex value of the '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'}
}
}
My problem is that when the 'menuHex' variable is changed, the change does not show until after I hit the menu toggle button or until I change pages. I want it so that the color of the header of the menu will be changed when the changetheme() function is complete. I tried running this.forceUpdate(), which did not work
Any more help is appreciated
解决方案
Apologies for making another question similar to this. My previous question was how to get Async Storage to block before continuing, because it wasn't before. Below was my code.
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)
}
};
What I ended up doing was creating a "Loading Page," which ran the function above on startup and then after it was done setting the style.menuHex variable, it changed to the 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(
Loading
)
}
}
This may not be what some people are looking for, but this method allowed me to fix my original problems.
转载地址：http://onudy.baihongyu.com/