javascript - 点击更改谷歌地图的主题 - React Native

Question

我有 React 原生 map ，我将自定义 map 主题设置为 this.state.mapTheme。

constructor() {
    super();
    this.state = {
        mapTheme: Themes.SANANDREAS
    }
}

我有这样的渲染方法:

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>
);}

这一切似乎都在工作，但是当我按下按钮改变状态时，渲染方法被调用但主题确实如此 不变。我的两个主题都有效，但在媒体上没有任何反应。页面重新加载但没有使用新主题。我在这里做错了什么？

Answer 1

考虑到 MapView组件的生命周期功能如果传递了新的样式 Prop ，它不会自动更新样式。您应该在主题更改后直接在“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>
  );
}