Question

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

图书馆使用：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值设置为map＆＃34; showsUserLocation = {this.state.isShowLocation}＆＃34; //值设置正确但无法重新加载地图

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

Answer 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}
      />
 ))}

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

1 个答案: