标记标注内的图像被剪切 React Native

Question

地图视图（谷歌地图）中标注内的图像不会显示整个图像。

起初，标注中没有显示图像。所以我更改了代码，将图像放入 .现在图像已经存在，但我坚持显示整个图像以显示在标注内。

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={{height:100, width:100}}>
        <Text>{shops.name}</Text>
        <Text className='bg-sky-100'>
            <Image style={{width:90, height:90}} source={shops.image} />  
        </Text>
        </Callout>
    </Marker>
)

这是图片来源

image: require('../assets/images/purewater.png'),

Answer 1

尝试将道具

resizeMode={'contain'}

添加到您的

<Image />

并用

<Text>

替换

<View>

容器：

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={{height:100, width:100}}>
        <Text>{shops.name}</Text>
        <View className='bg-sky-100'>
            <Image resizeMode={'contain'} style={{width:90, height:90}} source={shops.image} />  
        </View>
        </Callout>
    </Marker>
)

Answer 2

这个解决方案对我有用。

<Marker key={index} coordinate={{
    latitude: parseFloat(shop.shops.latitude), longitude: parseFloat(shop.shops.longitude),
    latitudeDelta: 0.007, longitudeDelta: 0.005
}}
>
    <Image source={require('../assets/images/pin1.png')} style={{ height: 30, width: 30 }} />
    <Callout style={{ height: 150, width: 160 }}
        onPress={() => navigation.navigate('Shop', { ...shop.shops })}
        onPressOut={() => dispatch(emptyShopData())}
    >
        <Text className='bg-sky-100 h-36 w-36 flex-1 -mt-24 mx-2'>
            <Image resizeMode={'cover'} style={{ width: 150, height: 150 }} 
            src={
                shop.shops.photo !== '' ? 
                PublicBaseURL + 'uploads/' + shop.shops.user_id + '/' + shop.shops.photo
                : PublicBaseURL + 'assets/img/no-image.png'
            } />
        </Text>
        <View className='flex-row'>
            <Text className='font-bold'>{shop.shops.business_name} · </Text>
            <Text className='text-sm text-green-600'>{shop.shops.distance.toFixed(1)} km</Text>
        </View>
        <Text className='italic text-sm'>Tap for more details</Text>
    </Callout>
</Marker>

基本上需要手动调整以适应您的设置。 为

<Text className='bg-sky-100 h-36 w-36 flex-1 -mt-24 mx-2'>

添加与标注大小相匹配的样式。最后，设置图像的样式

<Image resizeMode={'cover'} style={{ width: 150, height: 150 }}  src={...}

注意：我使用nativewind进行造型

图例：

h-36 w-36 -mt-24 mx-2

相当于

height: 144px,
width: 144px,
margin-top: -96,
margin-left: 8px,
margin-right: 8px