如何在反应原生地图视图上设置legend.png [英] how to style legend.png on a react-native map view

问题描述

我尝试在我的react-native项目中创建一个为android地图创建的图例。我很难让它正确定位。在图例容器中使用绝对属性将我抛弃。

样式

 货柜：{
 flex：1 
}，
地图： {
 position：'absolute'，
 top：56，
 left：0，
 right：0，
 bottom：0，
}，
 legendContainer：{
 position：'absolute'，
 left：200，
 right：0，
 bottom：0，
 height：65，
 $ b flex：1，
 alignItems：'center'，
 flexDirection：'column'，
 justifyContent：'center'，
 backgroundColor： '透明'
}，
图例：{
 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> 
  

解决方案

只要添加 resizeMode ='包含作为图片的属性，而不是其样式：

 < Image 
 source = {require（'../../ img / legend.png'）} 
 style = {styles.legend} 
 resizeMode ='contains'
 /> 
  

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

I am trying to style a legend I created for a android map in my react-native project. I am having a hard time getting it to position correctly. Having to use the absolute property with the legend container threw me off.

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 >

解决方案

Just add resizeMode='contain' as a property to your image and not in its style:

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

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

这篇关于如何在反应原生地图视图上设置legend.png的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！