如何避免切换Modal显示状态时重新加载组件？

嗨，我太懂这种烦恼了——每次打开地图Modal都要重新加载，不仅慢还费资源，毕竟地图组件本身就属于比较重的类型。别担心，我给你两个实用的解决思路，尤其是第一个，完全符合你说的可以不用Modal的需求：

• 用绝对定位的自定义弹窗替代原生Modal
  React Native的原生Modal有个“小特点”：当visible设为false时，它会直接把内部的所有子组件卸载掉，这就是为啥你每次打开都要重新加载MapView的原因。那我们可以自己动手用绝对定位的View来模拟Modal的效果，这样组件只是被隐藏，不会被从组件树里移除，地图的状态自然就保留住了。

  给你个完整的代码示例参考：

  import { View, TouchableOpacity, StyleSheet } from 'react-native';
  
  // 主组件里的结构
  <View style={styles.container}>
    {/* 这里放你的主页面内容 */}
    <TouchableOpacity onPress={() => setShowModal(true)}>
      {/* 打开地图弹窗的按钮 */}
    </TouchableOpacity>
  
    {/* 自定义的弹窗容器 */}
    <View style={[styles.modalWrapper, !showModal && styles.hidden]}>
      {/* 半透明遮罩，点击可以关闭弹窗 */}
      <TouchableOpacity 
        style={styles.overlay} 
        onPress={() => setShowModal(false)}
      />
      {/* 地图组件，始终挂载，不会被卸载 */}
      <MapView 
        style={styles.mapContent}
        onTogglePressed={() => setShowModal(false)} 
      />
    </View>
  </View>
  
  // 样式定义
  const styles = StyleSheet.create({
    container: {
      flex: 1,
    },
    modalWrapper: {
      position: 'absolute',
      top: 0,
      left: 0,
      right: 0,
      bottom: 0,
      justifyContent: 'center',
      alignItems: 'center',
      zIndex: 1000, // 确保弹窗在最上层
    },
    overlay: {
      position: 'absolute',
      top: 0,
      left: 0,
      right: 0,
      bottom: 0,
      backgroundColor: 'rgba(0, 0, 0, 0.5)',
    },
    mapContent: {
      width: '90%',
      height: '70%',
      borderRadius: 12,
      overflow: 'hidden',
    },
    hidden: {
      opacity: 0,
      pointerEvents: 'none', // 隐藏时禁止触摸交互，避免影响下层内容
    },
  });
  

  这个方案的好处很明显：MapView会一直留在组件树中，我们只是通过opacity控制它的显示/隐藏，用pointerEvents控制是否响应触摸，完全不会触发卸载和重新加载，地图的状态、加载的瓦片都会保留。

• 如果一定要用原生Modal？（不太推荐）
  说实话，原生Modal的设计就是当不可见时卸载子组件，所以很难绕过这个机制。就算你用React.memo或者useMemo去缓存MapView，只要Modal卸载了，组件还是会被销毁，所以这个方向基本走不通。不如直接用上面的自定义弹窗方案来得彻底。

备注：内容来源于stack exchange，提问作者Stefan Falk