React Native Maps onMapReady getMapBoundaries答案

【问题标题】：React Native Maps onMapReady getMapBoundariesReact Native Maps onMapReady getMapBoundaries
【发布时间】：2021-03-28 16:20:29
【问题描述】：

我找不到任何东西来修复它。我正在使用 react-native 地图

const finalMap = () => {

    return(
    <SafeAreaView style={styles.authContainerStyles}>
      <MapView
        style={styles.map}
        provider={PROVIDER_GOOGLE}
        region={{
          latitude:   !!userLocation ? userLocation.coords.latitude : 43.60271848664041,
          longitude: !!userLocation
          ? userLocation.coords.longitude
          : -116.20149258821509,
          latitudeDelta: 0.05,
          longitudeDelta: 0.05,
        }}
        onMapReady = {this.map.getMapBoundaries()}
      >

【问题讨论】：

你能发布完整的组件吗？在onMapReady 部分，this.map 应该指的是什么？
这是完整的组件。由于我没有找到关于如何调用获取地图边界的文档，所以我只是在网上寻找示例，所有示例都使用了 this.map，所以我认为这就是你的做法

标签： react-native react-native-maps

【解决方案1】：

尝试以下代码或在此处运行此 Snack：https://snack.expo.io/Cu5qYmcZm

function Map() {
  const [mapRef, updateMapRef] = useState(null);
  const getBoundaries = () => {
    if (mapRef === null) {
      return;
    }
    mapRef
      .getMapBoundaries()
      .then((res) => {
        console.log(res);
      })
      .catch((err) => console.log(err));
  };
  return (
    <View>
      <MapView
        ref={(ref) => updateMapRef(ref)}
        onMapReady={() => getBoundaries()}
      />
    </View>
  );
}

您需要将ref 存储到地图中，以便稍后（检查边界时）参考它。您也可以将其存储在状态中。然后在地图准备好后，触发事件并使用 ref 我们可以引用它并查询有关边界的信息。

【讨论】：

我认为有一些上下文我没有给你，因为我试图把它放进去，我得到了大量的错误，并且说它被创建但没有被读取。具体用this。声明
你能分享你在哪里使用这个组件的完整代码吗？ Expo Snack 运行没有任何错误。
啊，好吧，就是这样，我不使用世博会。我正在使用gradle。确定这是代码，它的字符太多无法发布，所以我只是将其放入碳中，获取 png 并将其发布到 imgur imgur.com/a/A7UZQSo
你使用的是函数组件（不是类组件）所以需要将上面的类组件转成函数组件（可以使用useState来存储map ref）
现在看看答案 - 我已经更新它以使用钩子。 ref={(ref) => updateMapRef(ref)} 在地图上需要这个来更新状态中的 ref。