从 MapView 组件访问 ref 属性以供外部函数使用

Posted 2023-02-23

【中文标题】从 MapView 组件访问 ref 属性以供外部函数使用

【英文标题】：Access ref prop from MapView component for use by outside function

【发布时间】：2019-12-05 21:25:33

【问题描述】：

有没有办法从外部函数访问 MapView 组件的 ref 属性？

基本上，我有：

具有渲染方法的主组件将调用(<MyMap />)

<MyMap /> 是 MapView 组件的导出函数。在 MapView 组件中，我创建了一个引用 (ref=map=>(mapRef=map)，并希望将该引用传递给生成我的标记 (<PinData /> 的函数。

在<PinData />，我想使用 onPress 事件 标记以放大并使用 MapView.animateToRegion 方法。

我不断得到 undefined is not an object（评估 'mapRef.animateToRegion'）。

为了呈现 MapView 和 Markers 组件，我是否必须创建组件类（而不是使用导出的函数）才能使地图引用工作？

例如： 主类组件：

render()
     return(
          <View>
             <MyMap region=this.state.region 
                    pinData=this.state.pinsData 
                    myPins=this.state.myPins
                    mapRef=this._mapRef />
          </View>
)

MyMap 函数呈现我的 MapView 组件。

export const MyMap= ( region, pinsData, myPins) => 

  return (
    <View style=styles.container>
      <MapView
        provider=PROVIDER_GOOGLE
        ref=map => (mapRef = map)
        style=styles.userMap
        region=region
      >
        <PinData pinsData=pinsData myPins=myPins />
      </MapView>
    </View>
  );

用于在我的地图上生成标记的 PinData 函数。

export const PinData = ( pinsData, myPins, mapRef ) => 
  return pinsData.map((pin, index) => (
    <Marker
      key=index
      ref=ref => (markers[index] = ref)
      coordinate=
        longitude: pin.coordinates.lng,
        latitude: pin.coordinates.lat
      
      onPress=focusMarker(mapRef, pin, index)
    />
  ));
;

onPress 函数，该函数将使用与 MapView 对象关联的 animateToRegion 方法放大其中一个图钉。

focusMarker = (mapRef, location, index) => 
  mapRef.animateToRegion(
    latitude: location.coordinates.lat,
    longitude: location.coordinates.lng,
    latitudeDelta: 0.005,
    longitudeDelta: 0.005
  );
;

【参考方案1】：

您可以将onPress 属性传递给PinData

export const MyMap= ( region, pinsData, myPins) => 
    const mapRef = useRef();

  focusMarker = (location) => 
    mapRef.current.animateToRegion(
      latitude: location.coordinates.lat,
      longitude: location.coordinates.lng,
      latitudeDelta: 0.005,
      longitudeDelta: 0.005
    );
  ;

  return (
    <View style=styles.container>
      <MapView
        provider=PROVIDER_GOOGLE
        ref=mapRef
        style=styles.userMap
        region=region
      >
        <PinData pinsData=pinsData myPins=myPins onPress=focusMarker/>
      </MapView>
   </View>
);



export const PinData = ( pinsData, myPins, onPress ) => 
  return pinsData.map((pin, index) => (
    <Marker
      key=index
      ref=ref => (markers[index] = ref)
      coordinate=
        longitude: pin.coordinates.lng,
        latitude: pin.coordinates.lat
      
      onPress=() => onPress(pin)
    />
  ));
;

【讨论】：

这非常有效。快速提问，只是为了让我理解它是如何工作的逻辑。您可以通过调用 useRef() 创建 MapView 组件的引用。 onPress 部分是如何工作的？您引用了一个名为 onPress 的道具并将其链接到 focusMarker 函数。然后，在 PinData 函数中，您为 onPress Marker prop 调用一个匿名函数，该函数指向 onPress（接收 pin）作为参数。这个 onPress 是如何工作的？在 PinData 函数中 focusMarker 是如何引用 pin 的？

【参考方案2】：

感谢 Tuan 的回答，我想通了。上面的代码有效。我之前不理解的是 onPress 是如何工作的。基本上，据我的理解，逻辑如下：

在 MyMap 函数中，我们定义了 focusMarker 函数。

然后在调用的 onPress 中创建一个 prop 并将其设置为等于 focusMarker 函数。

在 PinData 函数中，我们现在将这个 prop(onPress) in 作为参数，并将 Marker 组件中的 onPress prop 设置为一个匿名函数，该函数将执行带有 pin 参数的 focusMarker 函数。在这个函数中，作为导出函数的参数传入的onPress实际上是focusMarker函数本身，我们使用pin参数调用它。希望这对任何可以利用它的人都有意义。再次感谢团。欣赏它。我有一段时间被这个问题难住了。