es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

No se puede aplicar borderRadius a react-native-maps.

27 Jul, 2023 Programación

Estoy trabajando con React Native y quiero agregar borderRadius a mi vista de mapa de Google pero no funcionó.

<view style="{{" backgroundcolor:="" "#fff",="" flex:="" 1,="" borderradius:="" 30,="" margin:="" 20,="" }}="">
  <map></map>
</view>
<view style="{{" margintop:="" 40,="" flexdirection:="" "column",="" justifycontent:="" "center",="" height:="" 300,="" width:="" 370,="" }}="">

Componente Mapa:

const Mapa = () => {
  return (
    <mapview style="{tw`flex-1`}" custommapstyle="{mapStyle}" initialregion="{{" latitude:="" 37.78825,="" longitude:="" -122.4324,="" latitudedelta:="" 0.0922,="" longitudedelta:="" 0.0421,="" }}=""></mapview>
  );
};

resultado aquí

Entonces, ¿cómo puedo hacer eso correctamente?

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para agregar borderRadius a una vista de Google Map en React Native, debes aplicar el estilo borderRadius al componente MapView en lugar del componente View de envoltura.

    Aquí tienes un extracto de código actualizado:

    <view style="{{" backgroundcolor:="" "#fff",="" flex:="" 1,="" margin:="" 20,="" }}="">
  <mapview style="{{" flex:="" 1,="" borderradius:="" 30="" }}="" custommapstyle="{mapStyle}" initialregion="{{" latitude:="" 37.78825,="" longitude:="" -122.4324,="" latitudedelta:="" 0.0922,="" longitudedelta:="" 0.0421,="" }}=""></mapview>
</view>

    Al aplicar el estilo borderRadius al componente MapView, deberías ver el resultado esperado con esquinas redondeadas.

Comments are closed.