problem description
use react-native, and react-navigation to make a skin change function. The bottom BottomTabNavigator can dynamically change the color, but the top StackNavigator can not dynamically change the color. Why?
if the page has not been opened, the StackNavigator at the top can also change the color dynamically.
GitHub project source code here, which kind boss can take a look at it
related codes
use react-native "s DeviceEventEmitter to send an "theme_change" event
after choosing to switch topics.onSelectTheme(key){
DeviceEventEmitter.emit("theme_change", ThemeFactory.createTheme(ThemeFlags[key]) )
}
listen for the event on the entry page and update state.
componentDidMount(){
this.appListener = DeviceEventEmitter.addListener("theme_change",(params) => {
this.setState({
theme:params
})
})
}
pass state to react-navigation via screenProps
render(){
return (
<AppStack screenProps={this.state.theme} />
)
}
what result do you expect? What is the error message actually seen?
I hope that the StackNavigator at the top can also change the color dynamically, but in fact, pages that have been opened before changing the theme cannot change the theme color