В моем приложении я хочу отобразить выноску, когда пользователь нажимает на маркер. Я читал, что есть проблемы с отображением изображений в выноске, и многие люди предлагают поместить изображение в <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>