React Native Maps中Callout组件显示异常：内容被截断

以下是几个实测有效的解决方法，按优先级尝试：

1. 给Callout显式设置最小宽高 #

Callout默认可能无法正确计算内部内容的尺寸，手动指定最小宽高可以强制容器适配内容：

<Marker
  coordinate={{
    latitude: -20.213090469552533,
    longitude: -40.266256965125116,
  }}
  pinColor={'red'}>
  <Callout style={{ minWidth: 80, minHeight: 50 }}>
    <View style={{padding: 10}}>
      <Text style={{color: 'black'}}>Olá</Text>
    </View>
  </Callout>
</Marker>

2. 启用tooltip属性 #

将Callout设置为tooltip模式，会自动调整气泡尺寸适配内容：

<Marker
  coordinate={{
    latitude: -20.213090469552533,
    longitude: -40.266256965125116,
  }}
  pinColor={'red'}>
  <Callout tooltip={true}>
    <View style={{padding: 10}}>
      <Text style={{color: 'black'}}>Olá</Text>
    </View>
  </Callout>
</Marker>

3. 确保内部View无溢出隐藏 #

检查嵌套View的overflow属性，避免内容被意外截断：

<Callout>
  <View style={{padding: 10, overflow: 'visible'}}>
    <Text style={{color: 'black'}}>Olá</Text>
  </View>
</Callout>

4. 升级react-native-maps版本 #

旧版本的react-native-maps存在Callout尺寸计算的bug，升级到最新稳定版可以解决：

# npm
npm install react-native-maps@latest

# yarn
yarn add react-native-maps@latest

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