Question

我对本机地图有反应，并且将自定义地图主题设置为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方法被调用，但是主题确实没变。我的两个主题都在起作用，但在媒体上什么也没发生。页面将重新加载，但未使用新主题。我在这里做什么错了？

Answer 1

考虑到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>
  );
}

点击更改Google Map的主题-React Native

1 个答案: