У меня есть следующий компонент React Native, использующий react-natve-maps
для отображения карт. Мне требуется ref
для карты, чтобы использовать ее animateToRegion
функцию в отдельном компоненте, и поскольку я использую memo
React для предотвращения ненужных повторных рендерингов во время дорогой карты dr aws (например, тепловые карты), я Поэтому я также использую forwardRef
, поскольку функциональные компоненты не могут иметь ref
реквизит.
В итоге я получил следующее:
import React from 'react';
import {
StyleSheet,
View,
} from 'react-native';
import {
MapView,
Marker,
} from 'react-native-maps';
const MemoMap = React.memo(
React.forwardRef((props, ref) =>(
<MapView
ref={ref}
initialRegion={{
latitude: 0,
longitude: 5,
latitudeDelta: 0.01,
longitudeDelta: 0.01,
}}
style={StyleSheet.absoluteFillObject}>
<Marker
coordinate={{
latitude: 0,
longitude: 5,
}} />
</MapView>
)
), () => false);
export default function App() {
const mapRef = React.createRef();
const snapToMarker = () => {
mapRef.animateToRegion({
longitude: 0,
latitude: 0,
longitudeDelta: 0.01,
latitudeDelta: 0.01,
})
};
return (
<View>
<MemoMap ref={mapRef} />
<Button onPress={snapToMarker} />
</View>
);
}
(для простоты я высмеял функцию равенства memo
)
Однако ссылка всегда имеет current: null
, а не ссылка на карту. Таким образом, нажатие кнопки просто вызывает undefined
при вызове события animateToRegion
.
Что я могу сделать, чтобы получить требуемую ссылку на карту?