在我的应用程序中,我想在用户点击标记时显示标注。我读到在标注中显示图像存在问题,很多人建议将图像放在<Text>
组件[1 , 2 , 3]中。对于较小的图像/图标,此解决方案有效,但我想再显示一个“更大”的图像,这是一个效果:
我不知道为什么这张图片有这个“上边距”以及为什么它被切成两半。我尝试了很多改变这种风格的方法,Image
但resizeMode
没有任何效果。我在标注中的其他图像 - 就像底部的这个图标 - 有同样的问题,但是在放置帮助的组件中添加了更大的尺寸,一切看起来都很好。我在这张大图上尝试了这个解决方案,但它不起作用。
我将不胜感激任何帮助和建议。
他是Callout组件代码:
import { Dimensions, Image, StyleSheet, Text, View } from 'react-native'
import React, { Component } from 'react'
import { FontAwesome } from '@expo/vector-icons'
import PropTypes from 'prop-types'
import { colors } from '../constants/Colors'
const { width, height } = Dimensions.get('screen')
function getSpotDifficulty(spot) {
switch (spot.difficulty) {
case 0:
return 'DLA KAŻDEGO'
case 1:
return 'UMIARKOWANA'
case 2:
return 'DUŻA'
case 3:
return 'TYLKO DLA PROSÓW'
default:
return ' - '
}
}
function getSpotPopularity(spot) {
switch (spot.popularity) {
case 0:
return 'MALE'
case 1:
return 'SREDNIE'
case 2:
return 'DUŻE'
default:
return ' - '
}
}
const WATER_TYPE_FLAT_IC = require('../assets/images/ic_flat.png')
const WATER_TYPE_WAVE_IC = require('../assets/images/ic_wave.png')
const DIFFICULTY_EASY_IC = require('../assets/images/ic_flag_white_24.png')
const DIFFICULTY_HARD_IC = require('../assets/images/ic_flag_red_24.png')
export default class SpotMarkerCallout extends Component {
render() {
const marker = this.props.marker
const waterTypeIcon = marker.waterType === 0 ? WATER_TYPE_FLAT_IC : WATER_TYPE_WAVE_IC
const difficultyIcon = marker.waterType === 0 ? DIFFICULTY_EASY_IC : DIFFICULTY_HARD_IC
return (
<View style={styles.markerCallout}>
<Text >
<Image style={{flex: 1, height: 200}}
resizeMode={'cover'}
source={require('../assets/images/example_spot_photo.jpg')}/>
</Text>
<View style={{ flex: 1, flexDirection: 'column', justifyContent: 'center' }}>
<View style={styles.markerHeader}>
<Text style={styles.spotNameText}>
{marker.name}
</Text>
<View style={{ flex: 1, justifyContent: 'space-between' }}>
<View style={styles.sportsIconsContainer}>
<View style={styles.singleInfo}>
<Text style={styles.textViewForIcon}>
<Image style={styles.sportIcon}
source={marker.windsurfing ? require('../assets/images/windsurfing_icon.png') : null}/>
</Text>
</View>
<Text style={styles.textViewForIcon}>
<Image style={styles.sportIcon}
source={marker.kitesurfing ? require('../assets/images/kitesurfing_icon.png') : null}/>
</Text>
<Text style={styles.textViewForIcon}>
<Image style={styles.sportIcon}
source={marker.surfing ? require('../assets/images/surfing_icon.png') : null}/>
</Text>
</View>
<View style={{ flex: 1, flexDirection: 'row', justifyContent: 'flex-end' }}>
<View style={[styles.singleInfo, { marginRight: 8 }]}>
<FontAwesome name="star" color={colors.ratingColor} size={10}/>
<Text style={{ marginRight: 4, color: colors.ratingColor }}>{marker.rating}</Text>
</View>
<View style={[styles.singleInfo, { marginRight: 8 }]}>
<FontAwesome name="location-arrow" color={colors.secondaryColor} size={10}/>
<Text style={{ marginRight: 4, color: colors.secondaryColor }}>{marker.distance} km</Text>
</View>
</View>
</View>
</View>
<Text style={styles.descriptionText} numberOfLines={3} ellipsizeMode='tail'>
{marker.description}
</Text>
</View>
<View style={{ flex: 1, flexDirection: 'row', marginVertical: 8 }}>
<View style={{ flex: 1, flexDirection: 'column', marginLeft: 4, }}>
<View style={styles.singleInfo}>
<Text style={styles.infoIconTextView}>
<Image style={styles.infoIcon} source={waterTypeIcon}/>
</Text>
<Text style={styles.infoText}>{marker.waterType === 0 ? 'FLAT' : 'WAVE'}</Text>
</View>
<View style={styles.singleInfo}>
<Text style={styles.infoIconTextView}>
<Image style={styles.infoIcon} source={require('../assets/images/ic_shaka_128.png')}/>
</Text>
<Text style={styles.infoText}>{marker.schools ? ' SZKOLENIA DOSTĘPNE' : 'BRAK SZKOLEN'}</Text>
</View>
</View>
<View style={{ flex: 1, flexDirection: 'column', marginLeft: 16, }}>
<View style={styles.singleInfo}>
<Text style={styles.infoIconTextView}>
<Image style={styles.infoIcon} source={difficultyIcon}/>
</Text>
<Text style={styles.infoText}>{getSpotDifficulty(marker)}</Text>
</View>
<View style={styles.singleInfo}>
<Text style={styles.infoIconTextView}>
<Image style={styles.infoIcon} source={require('../assets/images/ic_peoples.png')}/>
</Text>
<Text style={styles.infoText}>{getSpotPopularity(marker)}</Text>
</View>
</View>
</View>
</View>
)
}
}
SpotMarkerCallout.propTypes = {
marker: PropTypes.object.isRequired,
}
const styles = StyleSheet.create({
markerCallout: {
flex: 1,
width: width * 0.8,
flexDirection: 'column',
paddingLeft: 12,
justifyContent: 'space-around',
},
markerHeader: {
flexDirection: 'row',
justifyContent: 'space-between',
},
spotNameText: {
fontSize: 22,
fontFamily: 'dosis_light',
textTransform: 'uppercase',
alignSelf: 'center',
},
sportsIconsContainer: {
flex: 1,
flexDirection: 'row',
justifyContent: 'flex-end',
alignItems: 'center',
marginRight: 8,
},
singleInfo: {
flexDirection: 'row',
alignItems: 'center',
},
infoIcon: {
height: 18,
width: 18,
justifyContent: 'center',
alignItems: 'center',
},
infoIconTextView: {
height: 24,
justifyContent: 'center',
alignItems: 'center',
},
descriptionText: {
fontSize: 12,
color: colors.textBlackSecondaryColor,
paddingTop: 5,
},
sportIcon: {
height: 24,
width: 24,
},
textViewForIcon: {
height: 32,
},
infoText: {
fontSize: 10,
paddingLeft: 8,
justifyContent: 'center',
alignSelf: 'center',
},
})
这是使用代码:
<MapView.Callout onPress={() => this.props.navigation.navigate('SpotInfo', { chosenSpot: spot })}>
<TouchableHighlight>
<SpotMarkerCallout
marker={spot}/>
</TouchableHighlight>
</MapView.Callout>
</Marker>