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

Question

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

基本上，我有：

1. 一个主组件，它有一个将调用(<MyMap />)的渲染方法

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

3. 在<PinData />中，我想将 onPress 事件用于 要放大并移动到标记的标记，使用 MapView.animateToRegion 方法。

我一直得到未定义的不是对象(评估"mapRef.animateToRegion"(。

我是否必须创建组件类(而不是使用导出的函数(才能使映射引用正常工作才能呈现 MapView 和标记组件？

前任： 主类组件：

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 道具设置为一个匿名函数，该函数将使用 pin 参数执行 focusMarker 函数。 在这个函数中，作为导出函数的参数传入的onPress实际上是focusMarker函数本身，我们使用pin参数调用它。 希望这对任何可以利用它的人来说都是有意义的。 再次感谢团。 欣赏它。 我被这难住了一段时间。