React Native Google Map标记点Callout内图片显示不全问题

问题根源 #

你当前写法里把Image嵌套在Text组件中，这不符合组件设计逻辑——Text是专门承载文本的容器，对非文本元素会有额外布局限制，这是图片被截断的核心原因；另外硬给Callout设置固定宽高，也可能导致内容超出容器范围无法完整显示。

修复方案 #

直接用View替代Text作为图片容器，配合合理布局样式和图片缩放模式，就能解决显示问题：

return (
    <Marker 
        key={index} 
        coordinate={{
            latitude: shops.lat, 
            longitude: shops.lng,
            latitudeDelta: 0.007, 
            longitudeDelta: 0.005
        }} 
        image={require('../assets/images/pin1.png')}
    >
        <Callout style={{padding: 8, minWidth: 100}}>
            {/* 用View作为容器包裹文本和图片，实现正常布局 */}
            <View style={{alignItems: 'center'}}>
                <Text style={{marginBottom: 6}}>{shops.name}</Text>
                <Image 
                    style={{width: 90, height: 90}} 
                    source={shops.image}
                    resizeMode="contain" // 确保图片完整适配容器尺寸
                />
            </View>
        </Callout>
    </Marker>
)

关键修改说明 #

• 移除Text包裹图片的结构，改用View作为通用布局容器，消除文本组件对图片的布局限制
• 给Callout设置padding替代固定宽高，让容器根据内容自动调整，同时避免内容紧贴边缘
• 给Image添加resizeMode="contain"，保证图片在设定的宽高内完整显示，不会被拉伸或截断
• 用marginBottom给文本和图片之间增加间距，提升排版美观度

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