cómo diseñar legend.png en una vista de mapa nativa de reacción
Estoy tratando de diseñar una leyenda que creé para un mapa de Android en mi proyecto react-native. Me está costando conseguir que se posicione correctamente. Tener que usar la propiedad absoluta con el contenedor de la leyenda me rechazó.
Estilos
container: {
flex: 1
},
map: {
position: 'absolute',
top: 56,
left: 0,
right: 0,
bottom: 0,
},
legendContainer: {
position: 'absolute',
left: 200,
right: 0,
bottom: 0,
height: 65,
width: 210,
flex: 1,
alignItems: 'center',
flexDirection: 'column',
justifyContent: 'center',
backgroundColor: 'transparent'
},
legend: {
top: 0,
right: 0,
height: 60,
width: 180,
flexDirection: 'row',
resizeMode: 'cover'
}
Map.js
<View style= { styles.container } >
<Toolbar
title={this.state.selectedTrip.tripName || this.state.selectedTripName} />
<MapView
style={styles.map}
region={this.state.region}
>
</MapView>
<View style={styles.legendContainer}>
<Image source={require('../../img/legend.png') } style={styles.legend}/>
</View>
</View >