Javascript 从MapView组件访问ref prop供外部功能使用

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

基本上，我有：

具有将调用

（）

是带有MapView组件的导出函数。在MapView组件中，我创建了一个引用

（ref=map=>（mapRef=map）

，并希望将该引用传递给生成标记的函数

（

）

在

中，我想将onPress事件用于 要放大并移动到标记的标记使用 MapView.animateToRegion方法

我一直得到未定义的对象不是对象（正在计算'mapRef.animateToRegion'）。

为了渲染MapView和Markers组件，是否必须为贴图引用创建组件类（而不是使用导出的函数）

例： 主要类组件：

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

---

您可以将

onPress

prop传递给

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

export const MyMap=（{region，pinsData，myPins}）=>{
const mapRef=useRef（）；
焦点标记=（位置）=>{
mapRef.current.animateToRegion({
纬度：location.coordinates.lat，
经度：location.coordinates.lng，
纬度德尔塔：0.005，
纵向图LTA:0.005
});
};
返回(
);
}
export const PinData=（{pinsData，myPins，onPress}）=>{
返回pinsData.map（（pin，index）=>(
（标记[索引]=ref）}
协调={{
经度：pin.coordinates.lng，
纬度：pin.coordinates.lat
}}
onPress={（）=>onPress（pin）}
/>
));
};

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

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

然后在调用的onPress中创建一个道具，并将其设置为focusMarker函数

---

在PinData函数中，我们现在使用这个道具（onPress）作为参数，将Marker组件中的onPress属性设置为匿名函数，该函数将使用pin参数执行focusMarker函数。在该函数中，作为导出函数的参数传入的onPress实际上是focusMarker函数本身，我们使用pin参数调用它。希望t对任何能够利用它的人来说都是有意义的。再次感谢Tuan。感谢它。我对此感到困惑了一段时间。

这很好用。快速提问，让我了解它的工作原理。您可以通过调用useRef（）来创建对MapView组件的引用。onPress部件是如何工作的？您引用了一个名为onPress的道具，并将其链接到focusMarker函数。然后，在PinData函数中，您为onPress Marker道具调用了一个匿名函数，该道具指向onPress（接受pin）作为参数。此onPress如何工作？focusMarker如何引用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)}
    />
  ));
};

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

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