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

Question

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

基本上，我有：

一个具有渲染方法的主要组件将调用 (<MyMap />)
<MyMap /> 是 MapView 组件的导出函数。在 MapView 组件内部，我做了一个引用 (ref=map=>(mapRef=map) 并想将该引用传递给生成我的标记 (<PinData />.
在 <PinData /> 中，我想将 onPress 事件用于标记以放大并使用 MapView.animateToRegion 方法。

我一直收到 undefined is not an object (evaluating 'mapRef.animateToRegion').

我是否必须创建组件类（而不是使用导出函数）才能使地图引用正常工作以呈现 MapView 和标记组件？

例如：主要 Class 组件：

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

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

Answer 2

多亏了Tuan的回答，我明白了。上面的代码有效。我之前不了解的是 onPress 是如何工作的。基本上，根据我的理解，逻辑如下：

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

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

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

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

Access ref prop from MapView component for use by outside function

javascript

react-native

react-native-maps