React Native中Map View标记点二次进入页面时不渲染问题求助

嘿，我仔细看了你的问题和代码，咱们来一步步排查这个标记点消失的问题～

你提到标记初始加载正常，但切换Tab再回来就消失，而且数据是存在的（日志能看到响应），那大概率是组件状态或渲染逻辑的问题，给你几个可能的解决方案：

1. 用导航聚焦钩子替代普通useEffect #

你现在的useEffect只在组件首次挂载时执行一次，但如果是Tab导航，切换页面时组件可能被卸载，再切回来时虽然会重新挂载，但有时候可能因为导航的生命周期问题，数据更新没有触发渲染。试试用React Navigation的useFocusEffect，它会在每次屏幕获得焦点时执行，确保切回Map页面时重新获取数据：

import { useFocusEffect } from '@react-navigation/native';

// 替换原来的useEffect
useFocusEffect(
  React.useCallback(() => {
    getMarkers();
    return () => {};
  }, [])
);

这样每次切回Map Tab时，都会重新调用getMarkers，确保markers状态被正确更新。

2. 优化列表的key值 #

你在父组件的map循环里用了index作为CustomMarker的key，这在数据不变时看似没问题，但React推荐用每个元素的唯一标识（比如你的marker._id）作为key，避免复用组件时出现渲染异常：

{markers?.map((marker) => {
  return (
    <CustomMarker
      pumps={marker}
      key={marker._id} // 这里换成唯一id
      onSelectMarker={setSelectedMarker}
    />
  );
})}

3. 启用tracksViewChanges={false} #

react-native-maps的Marker组件默认tracksViewChanges={true}，这个属性有时候会导致重新渲染时标记不显示。你可以在CustomMarker的Marker里加上这个属性试试：

<Marker
  key={pumps?._id}
  tracksViewChanges={false} // 启用这个属性
  coordinate={{
    latitude: pumps?.latitude,
    longitude: pumps?.longitude,
  }}
  onPress={() => onSelectMarker(pumps)}
>

4. 让Tab组件保持挂载状态 #

如果用的是React Navigation的Tab Navigator，可以给Map对应的Tab页面设置keepMounted: true，这样切换Tab时组件不会被卸载，状态会保留：

<Tab.Screen
  name="Map"
  component={MapScreen}
  options={{ keepMounted: true }} // 加上这个配置
/>

这样即使切走再回来，组件的markers状态不会被清空，标记自然就不会消失了。

你可以先试试这些方案，从第1或第4个开始，应该能解决问题～

备注：内容来源于stack exchange，提问作者A.Ben