如何在react-native地图视图上设置legend.png样式

Question

我正在尝试为我在react-native项目中为android地图创建的图例设置样式。我很难让它正确定位。必须将绝对属性与图例容器一起使用才能让我离开。

样式

   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

只需将resizeMode='contain'作为属性添加到您的图片中，而不是其样式：

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

参考：http://facebook.github.io/react-native/docs/image.html#resizemode