Question

是否可以通过外部函数从MapView组件访问ref属性？

基本上，我有：

一个主要组件，该组件具有将调用(<MyMap />)
<MyMap />是MapView组件的导出函数。在MapView组件内，我创建了一个引用(ref=map=>(mapRef=map)，并希望将该引用传递给生成我的标记(<PinData />的函数。
在<PinData />中，我想将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>
)}

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中创建一个道具，并将其设置为与focusMarker函数相等。

在PinData函数中，我们现在将此prop（onPress）作为参数，并将Marker组件中的onPress prop设置为匿名函数，该函数将使用pin参数执行focusMarker函数。在此函数中，作为导出函数的参数传入的onPress实际上是focusMarker函数本身，我们使用pin参数对其进行调用。希望对任何可以利用此功能的人都有意义。再次感谢团。欣赏它。我为此感到困惑。

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

2 个答案: