react-native-maps报错：指定子组件已有父组件，需先调用removeView()

问题分析 #

这个错误通常是组件实例被重复挂载到不同父容器，或视图更新时旧组件未正确卸载就重新渲染导致的，结合你的代码和环境，核心排查方向集中在Marker组件的渲染逻辑、视图层级冲突上。

解决方案 #

1. 为Marker添加唯一Key属性 #

React依赖Key识别组件实例，避免重复挂载同一实例。给Marker绑定基于学校ID的唯一Key，确保数据更新时组件能正确渲染：

修改MapView内的Marker代码：

{data && data.lat && data.lon && (
  <Marker
    key={data.id} // 使用学校唯一ID作为Key
    coordinate={{ 
      latitude: parseFloat(data.lat), 
      longitude: parseFloat(data.lon) 
    }}
    pinColor="red"
  />
)}

2. 处理ScrollView与MapView的嵌套冲突（安卓专属） #

安卓环境中，ScrollView和MapView嵌套易引发视图层级、触摸事件冲突，可尝试以下调整：

• 将MapView移出ScrollView容器，单独放置在页面底部
• 若无需MapView交互，可添加pointerEvents="box-none"属性禁用其触摸响应
• 使用第三方库（如react-native-scrollview-map）处理滚动冲突

3. 清除Expo缓存并重启项目 #

缓存异常可能导致渲染错误，执行以下命令清除缓存后重新启动项目：

expo r -c

4. 确保坐标数据类型正确 #

若接口返回的lat/lon为字符串类型，需转换为数字后再传给Marker的coordinate，避免渲染异常（步骤1的代码已包含此处理）。

验证步骤 #

1. 应用上述修改后，重新启动Expo项目
2. 在Android设备的Expo Go中打开对应页面，检查错误是否消失
3. 测试页面滚动、MapView交互等功能是否正常

内容的提问来源于stack exchange，提问作者Q8root