-1

Estou estudando reacti native e estou tentando mostrar uma imagem em um local no mapa. Quando ajusto o width e o height da imagem, ela acaba sendo "cortada" quando fica maior que 40px. Estou usando o expo.

Componente Main.js

import React, {useState, useEffect} from 'react';
import {StyleSheet, Image} from 'react-native';
import MapView, {Marker} from 'react-native-maps';
import {requestPermissionsAsync, getCurrentPositionAsync} from 'expo-location'

    function Main(){
        const [currentRegion, setCurrentRegion]= useState(null);


        useEffect(() => {
            async function loadInitialPosition(){
                const {granted} = await requestPermissionsAsync();

                if (granted) {
                    const {coords} = await getCurrentPositionAsync({
                        enableHighAccuracy: true
                    });

                    const {latitude, longitude} = coords;

                    setCurrentRegion({
                        latitude,
                        longitude,
                        latitudeDelta: 0.04,
                        longitudeDelta: 0.04,
                    })
                }
            }

            loadInitialPosition();
        }, []);

        if(!currentRegion){
            return null;
        }

        return (
            <MapView initialRegion={currentRegion} style={styles.map}>
                <Marker coordinate={{latitude: -30.84235, longitude: -53.5582612}}>
                    <Image style={styles.avatar} source={{ uri: "https://avatars1.githubusercontent.com/u/50212082?s=460&v=4" }}/>  
                </Marker>
            </MapView>
        );
    }

    const styles = StyleSheet.create({
        map:{
            flex: 2
        }, 
        avatar:{
            width: 60,
            height: 60,
            borderRadius: 4,
            borderWidth: 4,
            borderColor:'#fff'
        }
    });

    export default Main;

Imagem com 40x40px:

inserir a descrição da imagem aqui

Imagem com 60x60px

inserir a descrição da imagem aqui

1 Resposta 1

0

Existe uma props no component Image chamada de resizeMode

https://facebook.github.io/react-native/docs/image

Porém pode ser também que o seu component marker tenha um tamanho máximo também pra você verificar isso tem que olhar na documentação dessa lib

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .