Question

我有一个react-native-maps MapView，它在fitToCoordinates函数中使用。该功能缩放地图以适合起点（当前用户位置）和终点。下面是MapView对象：

<MapView
      ref={map => { this.map = map; }}
      region={{
        latitude: this.props.startLatitude,
        longitude: this.props.startLongitude,
        latitudeDelta: 0.0922,
        longitudeDelta: 0.0421
      }}
      style={styles.mapContainer}
      showsCompass={false}
      showsUserLocation
    >

      <MapViewDirections
        origin={{ latitude: this.props.startLatitude, longitude: this.props.startLongitude }}
        destination={this.props.optimalDestination}
        apikey={GOOGLE_API_KEY}
        strokeWidth={2}
        strokeColor={COLORS.MAIN.hexCode}
      />

      {this.walkLine()}

      {this.optimalAddressFound()}

      {this.fitCoordinates()}

    </MapView>

MapView对象中引用的fitToCoordinates函数如下：

fitCoordinates() {
if (this.props.optimalAddressFound && this.props.destinationMapFit) {
  this.map.fitToCoordinates(
    [{ latitude: this.props.startLatitude,
      longitude: this.props.startLongitude },
    { latitude: this.props.optimalAddressLat,
    longitude: this.props.optimalAddressLng }],
    { edgePadding: { top: 30, right: 30, bottom: 30, left: 30 } }
  );
 }
}

一切正常，除了当用户打开React Navigation Drawer菜单，导航到另一个页面然后返回到Map页面时。如果这样做，对MapView对象的引用将变得不确定，并且fitToCoordinates函数将失败（TypeError：无法准备属性'fitToCoordinates'的未定义）。

我的问题是，如果我的用户导航到其他屏幕，如何维护地图参考？我尝试创建一个函数将MapView对象存储在Redux存储中，但是Redux存储似乎无法在Reducer中接受对象。

Answer 1

如果您使用react-navigation，则需要为Map-Screen设置一个键，以确保重复使用同一屏幕，而不是每次都创建一个新屏幕。

类似

navigation.navigate({key: 'map-screen', routeName: 'Map'});

React Native Maps ref问题

1 个答案: