Question

我正在开发一个具有卡片的反应本机应用程序，并且需要卡片的背景图像。

如何将背景图像添加到卡片中？我尝试使用<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%',

    }

Answer 1

imageStyle：{

width: 340, 
height: '100%',

}

100％不起作用。你必须在顶部做一个常数并用它来代替＆＃39; 100％＆＃39;

Answer 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
  }
});

如何在cardview中插入背景图片？

2 个答案: