如何解决有没有办法在不重新渲染的情况下更改react-native-maps <Markerordinate = {coordinate} /> API坐标?
我的目标是防止用户拖动地图时重新渲染,同时还要更改市场坐标。当前的解决方案是使用useState
挂钩。但这会导致组件重新呈现,这会导致应用延迟。
我尝试使用let variable
,但它不会移动marker
。
tl:dr
Screen.js
import React from 'react';
import {StyleSheet,View} from 'react-native';
import MapView,{Marker,PROVIDER_GOOGLE} from 'react-native-maps';
const styles = StyleSheet.create({
container: {
...StyleSheet.absoluteFillObject,height: 400,width: 400,justifyContent: 'flex-end',alignItems: 'center',},map: {
...StyleSheet.absoluteFillObject,});
具有useState(昂贵的重新渲染)的Screen.js
export default function GoSendDestinationDetails() {
const [coordinate,setCoordinate] = React.useState({
latitude: -6.1754,longitude: 106.8272,latitudeDelta: 0.015,longitudeDelta: 0.0121,});
const handleRegionChange = (region) => {
setCoordinate(region);
console.log(region);
};
console.log('re-render');
return (
<View style={styles.container}>
<MapView
provider={PROVIDER_GOOGLE} // remove if not using Google Maps
style={styles.map}
initialRegion={coordinate}
onRegionChange={handleRegionChange}>
<MarkerMemo />
</MapView>
</View>
);
}
我尝试过的事情:
带有let变量的Screen.js
export default function GoSendDestinationDetails() {
let coordinate = {
latitude: -6.1754,};
const handleRegionChange = (region) => {
coordinate = region;
console.log(region);
};
// this does not update the marker when coordinate changes
const MarkerMemo = React.memo(() => <Marker coordinate={coordinate} />)
console.log('re-render');
return (
<View style={styles.container}>
<MapView
provider={PROVIDER_GOOGLE} // remove if not using Google Maps
style={styles.map}
initialRegion={coordinate}
onRegionChange={handleRegionChange}>
<MarkerMemo />
</MapView>
</View>
);
}
解决方法
useState
Hook 为您提供两件事:
- 一个将在渲染中持续存在的值
- 用于更新该值并触发重新渲染的 API。
如果您有一个不关心重新渲染的用例,但您确实需要跨渲染保留一个值,那么您需要 useState
的一半,它可以让您跨渲染保留一个值,但是不是触发重新渲染的另一半。
这正是useRef
所做的
useRef() 钩子不仅仅用于 DOM 引用。 “ref”对象是一个通用容器,它的当前属性是可变的,可以保存任何值
https://reactjs.org/docs/hooks-faq.html#is-there-something-like-instance-variables
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。