Как вставить фоновое изображение в cardview?

Я работаю над собственным приложением для реагирования, в котором есть карты и которому нужны фоновые изображения для карт.

Как добавить фоновое изображение к карточкам? Я пробовал с <ImageBackground>, но изображение не подходит для просмотра карты, вместо этого оно растягивается.

Ниже приведен код, который я использую,

<View style = {[styles.container, { marginTop:0, alignItems: 'center' }]}>
   <CardView
    cornerRadius = {10}
    style = {styles.cardViewStyleFirst}>
     <ImageBackground 
      source = {require('../assets/weatherbg.png')}
      style = {styles.imageStyle} >
        <Text style = {{ fontWeight: "bold", fontSize:22, textAlign:'left', color: '#000' }}>Weather Details</Text>
        <View style = {{ flex:7 }}>
         <Text style = {{ fontWeight: "bold", fontSize:20, textAlign:'center', color: '#000' }}>{this.state.data.name}</Text>
         <View style = {{ alignItems:'center' }}>
         <Image source = {{uri:`http://openweathermap.org/img/w/${this.state.data.weather[0].icon}.png`}} style = {{ height:80, width:80 }} />
         </View>

         <View>
          <Text style = {{ color: '#000'  }}>Forecast : {this.state.data.weather[0].main}</Text>
          <Text style = {{ color: '#000'  }}>Current Temperature : {this.state.data.main.temp} °C</Text>
         </View>
         </View>
     </ImageBackground>
    </CardView>  
</View>

Стили:

container: {
        flex:1,
        backgroundColor: '#F0F0F0'
    },

cardViewStyleFirst:{
      backgroundColor: '#FFFFFF',
      width: 340, 
      height: 250,
      alignItems: 'center'
    },

imageStyle:{ 
    width: 340, 
    height: '100%',

    }

Можете ли вы также добавить необходимые стили для CardView и View?

— 07.05.2018 11:50

Добавлен @PritishVaidya

— 07.05.2018 11:53

Вы устали от "resizeMode" в стилях изображений?

— 07.05.2018 12:06

@HungrySoul Я пробовал, для 'cover' - не меняется ',' contain '- изображение подогнано, но верх и низ обрезаны,' stretch '- растягивает изображение

— 07.05.2018 12:12

android react-native

07.05.2018 11:48

Коллекции (ArrayList , HashSet , HashMap)

788

Ответы 2

render: function() {

return (
  <View style = {styles.container}>
      <View
        style = {styles.card}
      >
        <Image source = {{uri: 'http://i.imgur.com/91AR0Lo.jpg'}} style = {styles.cardImage} />
        <View>
          <Text style = {styles.textLeft}>Animal, 10</Text>
          <Text style = {styles.textRight}>1 Connection</Text>
        </View>
      </View>
  </View>
);
}

var styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center'
  },
  card: {
    borderWidth: 3,
    borderRadius: 3,
    borderColor: '#000',
    width: 300,
    height: 300,
    padding: 10
  },
  cardImage: {
    height: 260,
  },
  textLeft: {
    position: 'absolute',
    left:0,
    top:0
  },
  textRight: {
    position: 'absolute',
    right: 0,
    top: 0
  }
});

Вопрос связан с React native. Вы предоставили решение для собственного Android, которое нельзя использовать в этом случае.

— 07.05.2018 11:55

извини, моя ошибка @ Abhishek DS

— 07.05.2018 11:57

07.05.2018 11:53

imageStyle: {