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

【问题标题】：how to style legend.png on a react-native map view如何在 react-native 地图视图上设置 legend.png 样式
【发布时间】：2016-10-01 04:41:17
【问题描述】：

我正在尝试在我的 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'
}

地图.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 >

【问题讨论】：

只需将resizeMode='contain' 作为属性添加到您的图像中，例如<Image source={require('../../img/legend.png') } style={styles.legend} resizeMode='contain' />，而不是其样式
太棒了！请输入答案

标签： reactjs react-native flexbox

【解决方案1】：

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

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

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

【讨论】：