如何让React Native中TouchableOpacity内的图片呈现按下反馈效果

你可以通过React自带的useStateHook管理点击状态，结合React Native原生支持的样式属性实现黑白/阴影效果的切换，完整修改代码如下：

import { useState } from 'react';
// 原有其他导入保持不变
export default function Recipie({ navigation, route }) {
  const recipies = GetRecipies();
  // 存储当前选中的菜谱索引，未选中时值为null
  const [selectedIndex, setSelectedIndex] = useState(null);

  return (
    <View style={{ flexGrow: 1, flex: 1 }}>
      <ScrollView>
        {recipies.map((u, i) => {
          // 判断当前项是否被选中
          const isPressed = selectedIndex === i;
          return (
            <View key={i}>
              <Text
                onPress={navigation.navigate}
                style={{
                  fontSize: 25,
                  fontFamily: "Cochin",
                  textAlign: "center",
                }}
              >
                {u._recipieName}
              </Text>
              <TouchableOpacity
                onPress={() => {
                  // 切换选中状态：如果当前是选中就设为null，否则设为当前索引
                  setSelectedIndex(isPressed ? null : i);
                  // 原有跳转逻辑保持不变，不需要跳转可以直接删除
                  navigation.navigate("SingleRecipieScreen", { u });
                }}
              >
                <Image
                  style={{
                    height: 200,
                    width: 350,
                    borderRadius: 80,
                    alignSelf: "center",
                    // 选中时添加灰度效果和阴影
                    ...(isPressed ? {
                      // 灰度100%实现黑白效果
                      filter: 'grayscale(1)',
                      // 浅灰色阴影效果
                      shadowColor: '#888',
                      shadowOffset: { width: 0, height: 2 },
                      shadowOpacity: 0.5,
                      shadowRadius: 4,
                      elevation: 5, // Android端阴影适配
                    } : {})
                  }}
                  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>
  );
}

补充说明 #

• 点击图片时会自动切换状态，选中后图片变为黑白+浅灰色阴影效果，再次点击恢复原始样式
• 如果你的项目React Native版本低于0.59不支持filter属性，可以把filter: 'grayscale(1)'替换为tintColor: 'rgba(150,150,150,0.6)'，用半透灰色叠加实现类似去色效果
• 如果只需要按住时显示效果、松开就恢复，可以把onPress拆分为onPressIn（设置选中状态）和onPressOut（清除选中状态）即可

内容的提问来源于stack exchange，提问作者DavidB