如何使TouchableOpacity影像看起來像被壓入？-有解無憂

我在每個 TouchableOpacity 中都有一個影像，我想在每個 onPress 函式中更改圖片，以便她看起來像是被按下（例如：從圖片中洗掉顏色并將其更改為黑白或制作淺灰色陰影在圖片上）。和反向（當你點擊她變回原始圖片時（按：true/false）。我有一個無狀態的組件，沒有類。

我的組件：

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>
  );
}

uj5u.com熱心網友回復：

嘗試在 View 中使用 position absolute 來覆寫 button ，并使用 useState 作為樣式，例如：

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

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/319250.html

標籤：反应原生

上一篇：ReactNative-禁用嵌套滾動

下一篇：FLatlist根本不渲染