React Native Maps自定义Marker异常求助：Callout不显示+样式无法覆盖

1. Marker自定义样式（宽高）不生效 #

自定义Marker内部View的宽高不生效，是因为默认Marker会限制子View的布局，添加tracksViewChanges={false}属性可解除限制，同时配合设置Marker本身的样式：

<Marker
  key={city.id}
  coordinate={{ latitude: city.latitude, longitude: city.longitude }}
  tracksViewChanges={false}
  style={{ width: 120, height: 30 }}
>
  <View style={{ 
    flex: 1, 
    justifyContent: 'center', 
    alignItems: 'center', 
    backgroundColor: '#ffffff',
    borderRadius: 6
  }}>
    <Text>Hello</Text>
  </View>
</Marker>

• tracksViewChanges={false}：禁用Marker对内部View变化的追踪，避免系统强制重置尺寸
• 给Marker直接设置style的宽高，内部View用flex:1撑满父容器，确保样式生效

2. Callout组件无法展示 #

Callout必须作为Marker的直接子组件，和自定义Marker内容同级嵌套，才能在点击Marker时正常触发展示：

<Marker
  key={city.id}
  coordinate={{ latitude: city.latitude, longitude: city.longitude }}
  tracksViewChanges={false}
>
  {/* 自定义Marker内容 */}
  <View style={{ width: 120, height: 30, backgroundColor: '#fff', justifyContent: 'center', alignItems: 'center' }}>
    <Text>Hello</Text>
  </View>
  {/* 嵌套Callout组件 */}
  <Callout>
    <View style={{ padding: 12, backgroundColor: '#fff', borderRadius: 8 }}>
      <Text style={{ fontSize: 16, fontWeight: 'bold' }}>{city.name}</Text>
      <Text style={{ fontSize: 12, color: '#666', marginTop: 4 }}>
        坐标：{city.latitude.toFixed(4)}, {city.longitude.toFixed(4)}
      </Text>
    </View>
  </Callout>
</Marker>

额外注意事项 #

• 确保使用最新稳定版的react-native-maps，旧版本存在样式和交互bug
• Android平台可添加collisionBehavior="none"属性，避免Marker被遮挡导致点击失效
• 检查是否有其他组件通过zIndex覆盖在Marker上层，影响点击交互

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