Question

我想使用我的imagebackground而不是在图像上输入文字有人帮我吗？

<ImageBackground                                     
    imageStyle={{ borderRadius: 100 / 4}}
    style={styles.image}
    source={{ uri: "example.com/" + itemData.item.image}}
>
    <View style={styles.includetitle}>
        <Text style={styles.title}>
            {itemData.item.title}
        </Text>
    </View>
</ImageBackground>

我尝试过这样，但我的文字也变得透明...

image: {
    width: '100%',
    height: '100%',
    opacity: 0.5
},

Answer 1

只需使用Image而不是ImageBackground并用View换行

<View style={style.container}>
  <Image style={[StyleSheet.absoluteFill, {resizeMode: 'cover', opacity: 0.5}]}/>
  <View style={styles.includetitle}>
        <Text style={styles.title}>
            {itemData.item.title}
        </Text>
  </View>
</View>

Answer 2

您可以使用此：

<ImageBackground
      borderRadius={15}
      fadeDuration={1}
      source={{
        uri: image
          ? image
          : "https://bitsofco.de/content/images/2018/12/Screenshot-2018-12-16-at 21.06.29.png",
      }}
      style={styles.imgcontainer}
    >
      <Text style={styles.name}>{restro.name}</Text>
</ImageBackground>

imgContainer和name的样式

imgcontainer: {
 justifyContent: "flex-end",
 height: 220,
 width: 330,
 padding: 20,
 marginRight: 20,
 marginVertical: 10,
 shadowColor: "#000",
 shadowOffset: {
   height: 5,
 },
 shadowOpacity: 0.5,
 shadowRadius: 10,
 elevation: 10,
 opacity:0.5
},
name: {
 color: "white",
 fontSize: 22,
 fontWeight: "bold",
 letterSpacing: 2,
 textShadowColor: "#000",
 textShadowOffset: {
   width: 2,
   height: 1,
 },
 textShadowRadius: 5,
 opacity:1
},

Answer 3

只需通过imageStyle道具传递不透明性

<ImageBackground                                     
    imageStyle={{ borderRadius: 100 / 4}}
    style={styles.image}
    imageStyle={{opacity:0.5}}
    source={{ uri: "example.com/" + itemData.item.image}}
>
    <View style={styles.includetitle}>
        <Text style={styles.title}>
            {itemData.item.title}
        </Text>
    </View>
</ImageBackground>

从样式表的图像对象中删除不透明度

用不透明而不是文本来反应本机图像背景

3 个答案: