如何使 TouchableOpacity 图像看起来像被按下？

Question

我在每个 TouchableOpacity 中都有一个图像，我想在每个 onPress 函数中更改图片，这样她就可以看起来像是被按下了（例如：从图片中删除颜色并将其更改为黑白或制作图片上的浅灰色阴影）。 和反向（当您单击她变回原始图片时（按：真/假）。 我有一个无状态组件，没有类。

我的组件：

export default function Recipie({ navigation, route }) {
  const recipies = GetRecipies();

  return (
    <View style={{ flexGrow: 1, flex: 1 }}>
      <ScrollView>
        {recipies.map((u, i) => {
          return (
            <View key={i}>
              <Text
                onPress={navigation.navigate}
                style={{
                  fontSize: 25,
                  fontFamily: "Cochin",
                  textAlign: "center",
                }}
              >
                {u._recipieName}
              </Text>
              <TouchableOpacity
                onPress={() => {
                  navigation.navigate("SingleRecipieScreen", { u });
                }}
              >
                <Image
                  style={{
                    height: 200,
                    width: 350,
                    borderRadius: 80,
                    alignSelf: "center",
                  }}
                  source={{ uri: u._imgUrl }}
                />
              </TouchableOpacity>

              <Text
                style={{
                  fontSize: 17,
                  fontFamily: "Cochin",
                  textAlign: "center",
                }}
              >
                {u._recipieDescription}
              </Text>

              <TouchableOpacity
                style={{ flex: 1, flexDirection: "column", flexGrow: 1 }}
              >
                {Show(u._preparationTime)}
              </TouchableOpacity>
            </View>
          );
        })}
      </ScrollView>
    </View>
  );
}

Answer 1

尝试在 View 中使用绝对位置覆盖按钮，并使用状态作为样式，例如：

import React, { useState } from "react";
import { StyleSheet, Text, TouchableOpacity, View,Image } from "react-native";

const App = () => {
  const [isPressed, setIsPressed] = useState(0);
  const onPress = () => setIsPressed(!isPressed);

  return (
    <View style={styles.container}>

      <TouchableOpacity
        style={styles.button}
        onPress={onPress}
      >
      <View style={isPressed && styles.pressedButtonStyle} />
        <Text> {isPressed ? "Pressed" : " Press Here"}</Text>
      <Image
        style={ styles.tinyLogo}
        source={{
          uri: 'https://reactnative.dev/img/tiny_logo.png',
        }}
      />
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    paddingHorizontal: 10,
  },
  button: {
    alignItems: "center",
    backgroundColor: "#DDDDDD",
  },
    tinyLogo: {
    width: 50,
    height: 50,
  },
  pressedButtonStyle: {
    position:"absolute",
    width:"100%",
    height:"100%",
    backgroundColor:'black',
    opacity:0.6,
    zIndex:100,
  }
});

https://snack.expo.dev/ixeOwAg3o