如何在点击时重新加载反应原生地图

Posted 2023-03-15

【中文标题】如何在点击时重新加载反应原生地图

【英文标题】：How to reload react native maps on click

【发布时间】：2018-03-22 12:15:43

【问题描述】：

我已经开发了一个 react native 项目，其中我有一个功能，在我的地图屏幕中，我有一个按钮来显示和隐藏用户当前位置，当我第一次点击按钮时它显示用户位置，第二次我点击那个按钮隐藏了用户位置，但是第三次​​之后它没有显示用户位置，所以任何人都可以在这里帮助我如何重新加载地图，所以我会再次使用用户位置。

库使用：https://github.com/react-community/react-native-maps

 constructor(props) 
                  super(props);
                  this.state = 
                      region: 
                          latitude: LATITUDE,
                          longitude: LONGITUDE,
                          latitudeDelta: LATITUDE_DELTA,
                          longitudeDelta: LONGITUDE_DELTA,
                        ,
                        isShowLocation:false
                  ;
            

// 下面的方法用于显示隐藏用户位置并将 isShowLocation 值设置为映射“showsUserLocation=this.state.isShowLocation” // 值设置正确但无法重新加载地图

onbntshowUserLocationTapped()

        if (this.state.isShowLocation == true)
        
            this.setState(
                isShowLocation:false
            )
        
        else
            this.setState(
                isShowLocation:true
            )
        
    


   <MapView
    provider= PROVIDER_GOOGLE 
    style= styles.map 
    initialRegion=this.state.region
    showsUserLocation=this.state.isShowLocation
    followsUserLocation=true
    >
    this.state.markers.map(marker => (
        <Marker
          image=marker.pin
          key=marker.key
          coordinate=marker.coordinate
          />
     ))

【参考方案1】：

您可以通过更改键值强制响应重新渲染。

key=this.state.forceRefresh

onbntshowUserLocationTapped()

    if (this.state.isShowLocation == true)
    
        this.setState(
            isShowLocation:false,
            forceRefresh: Math.floor(Math.random() * 100)
        )
    
    else
        this.setState(
            isShowLocation:true,
            forceRefresh: Math.floor(Math.random() * 100)
        )
    



<MapView
    key=this.state.forceRefresh
    provider= PROVIDER_GOOGLE 
    style= styles.map 
    initialRegion=this.state.region
    showsUserLocation=this.state.isShowLocation
    followsUserLocation=true
>
this.state.markers.map(marker => (
    <Marker
      image=marker.pin
      key=marker.key
      coordinate=marker.coordinate
      />
 ))