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

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

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

您还应该将activeOpacity上的TouchableOpacity设置为与ImageBackground上的{0.6）相同的值

Answer 2

通过在文本周围添加一个视图并为其提供以下道具来解决此问题：

          <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>

如何在平面列表中使用图像背景为不透明添加不透明度？

2 个答案: