[英]Changing the theme of Google Map on click - React Native
我对本机地图有反应,并且将自定义地图主题设置为this.state.mapTheme
。
constructor() {
super();
this.state = {
mapTheme: Themes.SANANDREAS
}
}
我有这样的render方法:
render() {
return (
<Container style ={styles.container}>
<Button rounded style={styles.contributeButton} onPress={() => {
this.setState({
mapTheme: Themes.BROWNTHEME
})
}} iconLeft light>
<Icon name='hand' />
<Text>Contribute</Text>
</Button>
<MapView
style={styles.map}
provider = { MapView.PROVIDER_GOOGLE }
customMapStyle = { this.state.mapTheme }
></MapView>
</Container>
);}
一切似乎都正常,但是当我按下按钮更改状态时,将调用render方法,但主题不会改变。 我的两个主题都在起作用,但在媒体上什么也没发生。 页面将重新加载,但未使用新主题。 我在这里做错了什么?
考虑到MapView组件的生命周期功能,如果传递了新的样式道具,它将不会自动更新样式。 您应该在主题更改后直接通过ref调用_updateStyle
来强制使用它:
setMapRef = ref => this.mapRef = ref;
handleButtonClick = () => {
this.setState({ mapTheme: Themes.BROWNTHEME }, () => {
this.mapRef._updateStyle();
})
}
render() {
return (
<Container>
<Button onPress={this.handleButtonClick}
title="Update map theme"
/>
<MapView
ref={this.setMapRef}
customMapStyle={this.state.mapTheme}
/>
</Container>
);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.