Блог

Главная - Вопросы по программированию - Как сделать, чтобы изображение TouchableOpacity выглядело как нажатое?

Как сделать, чтобы изображение TouchableOpacity выглядело как нажатое?

#react-native

Вопрос:

У меня есть изображение в каждом 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>
  );
}

Ответ №1:

Попробуйте использовать абсолютную позицию в поле зрения, чтобы закрыть кнопку, и 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 amp;amp; 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

Комментарии:

1. привет, большое спасибо! как я могу использовать это, если у меня есть уже экспортированная функция без функции стрелки? (у меня такой же компонент, как в примере выше)

2. Создайте компонент, который вы передадите в функцию со стрелкой: recipies.map((u, i) => { return <YoursComponent … реквизит> }

3. Попробуйте разделить пользовательский интерфейс и логику в разных компонентах

Метки: ,