wie style legend.png auf einer reaktiven nativen Kartenansicht

Question

Ich versuche, eine Legende, die ich für eine Android-Karte erstellt habe, in meinem reaktiven nativen Projekt zu stylen. Es fällt mir schwer, es korrekt zu positionieren. Die absolute Eigenschaft mit dem Legenden-Container zu verwenden, hat mich abgewimmelt.

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 > 

Answer 1

Fügen Sie einfach resizeMode='contain' als Eigenschaft zu Ihrem Bild und nicht in seinem Stil:

<Image 
    source={require('../../img/legend.png') } 
    style={styles.legend} 
    resizeMode='contain' 
/> 

Referenz: http://facebook.github.io/react-native/docs/image.html#resizemode