单击图像时，显示/隐藏（淡入/淡出）文本+图标覆盖

Question

我要发展以下行为：

点击图片：

1. 在点击的图片上添加文字/图标叠加
2. 点击的图像变淡/变暗

在随后单击同一张图片时：

1. 文字/图标叠加层消失
2. 点击的图片恢复为正常状态

这是到目前为止的代码，用于没有覆盖的图像。我看过类似的问题，但似乎没有一个符合我的期望行为。

render() {
    const image = this.props.image
    return (
      <View>
        <Image
          resizeMode="contain"
          style={{
            backgroundColor: "#D8D8D8",
            width: "100%",
            aspectRatio: 1
          }}
          source={{ uri: image }}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({

});

Answer 1

步骤-1：使用flatlsit渲染项目。

步骤2：使用可触摸的不透明度来渲染添加图像的项目abd。

步骤-3：按按钮时，显示或隐藏可通过状态进行管理的详细信息。还要从平面列表渲染项传递索引，并使用保存在类型转换变量/状态中的详细信息映射索引