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

问题描述 投票:0回答:2

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

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

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'),
react-native google-maps google-maps-markers react-native-maps callouts
2个回答
0
投票

尝试将道具

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>
)

0
投票

这个解决方案对我有用。

<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

最新问题
© www.soinside.com 2019 - 2025. All rights reserved.