wie man legend.png auf einer reaktionsnativen Kartenansicht formatiert
Ich versuche, eine Legende zu erstellen, die ich für eine Android-Karte in meinem reaktionsbasierten Projekt erstellt habe. Es fällt mir schwer, es richtig zu positionieren. Die absolute Eigenschaft mit dem Legendencontainer verwenden zu müssen, hat mich abgehauen.
Styles
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 >