如何在平面列表中将不透明度添加到具有图像背景的可触摸不透明度？

Question

我有一个平面列表，它呈现一个可点击的项目（具有可触摸的不透明度）和一个中间有一些文本的图像背景。

目标是呈现如下所示的平面列表：

我正在尝试通过添加带有叠加层的视图来为图像添加光不透明度，我尝试了多种解决方案，但似乎没有任何效果。

这是我迄今为止所取得的成就：

这是平面列表中的项目：

    // console.log("item", item.latest_image.media[0].url);
    if (item.empty === true) {
      return <View style={[styles.item, styles.itemInvisible]} />;
    }
    return (
      <TouchableOpacity
        onPress={() =>
          this.props.navigation.push(Screens.Photos, {
            team: item,
            id: this.props.navigation.getParam("team").id
          })
        }
      >
        <ImageBackground
          style={styles.backgroundImage}
          imageStyle={{ borderRadius: theme.borders_MediumRadius.borderRadius, backgroundColor: 'rgba(255,0,0,.6)' }}
          source={{ uri: item.latest_image.media[0].url }}
        >
            <Text style={styles.itemText}>{item.title.toUpperCase()}</Text>
        </ImageBackground>
      </TouchableOpacity>
    );
  };

这是平面列表：

      <SafeAreaView style={{ flex: 1 }}>
        <ScrollView
          style={{ flex: 1, backgroundColor: "black" }}
          scrollEnabled={scrollEnabled}
          onContentSizeChange={this.onContentSizeChange}
        >
          <FlatList
            data={formatData(this.state.data, numColumns)}
            style={styles.container}
            renderItem={this.renderItem}
            numColumns={numColumns}
            scrollEnabled={scrollEnabled}
          />
          <FollowUs />
        </ScrollView>
      </SafeAreaView>
    );

这些是样式道具：

  container: {
    margin: 7.5,
    backgroundColor: "black"
  },
  backgroundImage: {
    flex: 1,
    height: hp("25"),
    backgroundColor: "black",
    margin: 7.5,
    justifyContent: "center",
    alignItems: "center"
  },
  itemInvisible: {
    backgroundColor: "transparent"
  },
  itemText: {
    fontFamily: "RobotoCondensed-Bold",
    fontSize: RF(4),
    color: "black"
  },
  overlay: {
    backgroundColor: "rgba(255,0,0,0.5)",
    alignItems: "center",
    justifyContent: "center",
    flex: 1,
    margin: 7.5,
    height: hp("25"), // approximate a square
    borderRadius: theme.borders_MediumRadius.borderRadius
  }
});

如果有人可以帮助我，将不胜感激！

谢谢

Answer 1

通过在文本周围添加一个视图并给它这些道具来解决它：

          <View
            style={{
              flex: 1,
              alignItems: "center",
              justifyContent: "center",
              backgroundColor: "rgba(255,255,255,0.75)",
              borderRadius: theme.borders_MediumRadius.borderRadius
            }}
          >
            <Text style={styles.itemText}>{item.title.toUpperCase()}</Text>
          </View>

Answer 2

这是一个如何实现此目标的示例

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <TouchableOpacity
          style={{
            backgroundColor: '#FFF',
            height: 200,
            width: 200,
            position: 'relative'
          }}>
          <ImageBackground
            source={{ uri: 'https://placehold.it/200x200' }}
            style={{
              height: 200,
              width: 200,
              opacity: 0.6,
              position: 'absolute',
            }}
          />
          <View
            style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
            <Text>Hello World!</Text>
          </View>
        </TouchableOpacity>
      </View>
    );
  }
}

这是一个小吃示例 - https://snack.expo.io/@hannigan/lonely-bubblegum

您还应该将TouchableOpacity 上的activeOpacity 设置为与您将在ImageBackground 上设置的值相同(0.6)