Заставьте фоновое изображение исчезнуть из нажатия кнопки, TouchableWithoutFeedback - React Native?

Question

Я создал чрезвычайно большую кнопку с головой жирафа и голубым небом с облаками позади. Мне интересно, как, когда вы нажимаете на голову жирафа, вы можете сделать так, чтобы изображение (небо позади) исчезло, а затем появилось снова, когда вы снова нажмете жирафа. Мне нужно много этих кнопок, поэтому я попытался сделать компонент кнопки многократного использования.

Я сделал стек из компонентов. https://snack.expo.io/@tamsynjennifer/custom-button

В противном случае это код:

ПОВТОРНАЯ КНОПКА.JS

import React from 'react';
import { View, StyleSheet, Image, TouchableWithoutFeedback } from 'react-native';

const Button = ({ backgroundImage, mainImage, onPress }) => (
  <View style={styles.container}>
    <Image
       style={styles.bgImage}
       source={backgroundImage}
       resizeMode={'contain'}
    />
    <TouchableWithoutFeedback 
      onPress={onPress}
      style={styles.button}
    >
     <Image
        style={styles.image}
        source={mainImage}
        resizeMode={'contain'}
     />
    </TouchableWithoutFeedback>
  </View>
);

const styles = StyleSheet.create({
  container: {
    height: 250,
    width: 250,
    justifyContent: 'center',
    alignItems: 'center',
    marginTop: 0,
  },
  button: {
    height: 200,
    width: 200
  },
  bgImage: {
    alignSelf: 'center',
    justifyContent: 'center',
    position: 'absolute',
    height: 250,
    width: 250,
  },
  image: {
   alignSelf: 'center',
    justifyContent: 'center',
    position: 'absolute',
    height: 200,
    width: 200
  },
});

export default Button;

APP.JS

import React, { Component } from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { Constants } from 'expo';

const bgImage = require("./assets/BgImage.png");
const mainImage = require("./assets/MainImage.png");

import Button from './Button';

class App extends Component {
  render() {
    return (
      <View style={styles.container}>
          <View style={styles.button}>
             <Button
                backgroundImage={bgImage}
                mainImage={mainImage}
             />
          </View>

      </View>
     );
   }
}

const styles = StyleSheet.create({
  container: {
    height: 300,
    width: 300,
    justifyContent: 'center',
    alignItems: 'center'
  },
  button: {
    height: 250,
    width: 250,
    alignSelf: 'center',
    position: 'absolute' 
  },
});

export default App;

Answer 1

Вот как вы можете это сделать, я исправил ваш код. Во-первых, вам нужно установить setState и изменить состояние onPress, чтобы компонент повторно визуализировал и изменил изображение. Просто замените свой класс этим. Экспо Линк

import React, { Component } from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { Constants } from 'expo';

const bgImage = require("./assets/BgImage.png");
const mainImage = require("./assets/MainImage.png");

import Button from './Button';

class App extends Component {
constructor(props){
super(props)
this.state = {
  imageVisibility: true,
  backgroundImagePath: require("./assets/BgImage.png")
}
}

  render() {
    return (
      <View style={styles.container}>
          <View style={styles.button}>
             <Button
                backgroundImage={this.state.backgroundImagePath}
                mainImage={mainImage}
                onPress= {() => {this.changeImgaeVisibility()}}
             />
          </View>

      </View>
     );
   }

   changeImgaeVisibility = () => {
   if(this.state.imageVisibility){
       this.setState({imageVisibility: false, backgroundImagePath: null})
   }else{
       this.setState({imageVisibility: true, backgroundImagePath: require("./assets/BgImage.png")})
   }
   }

   }

const styles = StyleSheet.create({
  container: {
    height: 300,
    width: 300,
    justifyContent: 'center',
    alignItems: 'center'
  },
  button: {
    height: 250,
    width: 250,
    alignSelf: 'center',
    position: 'absolute' 
  },
});

export default App;

Answer 2

Вы можете добавить функцию в качестве объекта javascript к вашему JSX для рендеринга фонового изображения, этот метод будет возвращать объект, который вам нужен для рендеринга, как вы можете видеть в примере ниже:

const handleBackgroundImg = (imageBg, backgroundiImage) => {
  if (imageBg === true) {
   return <Image style={styles.bgImage} source={backgroundImage} resizeMode={'contain'}/>
  }
  return <Image />;
};

Чтобы добавить эту функцию в код JSX, вы должны изменить ее следующим образом:

const Button = ({ backgroundImage, mainImage, onPress, imageBg }) => (
  <View style={styles.container}>
    {handleBackgroundImg(imageBg, backgroundImage)}
    <TouchableWithoutFeedback 
      onPress={onPress}
      style={styles.button}
    >
     <Image
        style={styles.image}
        source={mainImage}
        resizeMode={'contain'}
     />
    </TouchableWithoutFeedback>
  </View>
);

Теперь, когда вы используете этот компонент, вы также должны передавать логическое изображение imageBg, считая true, если вы хотите показать bg, и false, когда вы хотите скрыть его. Смотрите код ниже:

<Button
  backgroundImage={bgImage}
  mainImage={mainImage}
  imageBg={true}
/>

Если у вас есть какие-либо сомнения, спросите здесь снова, и я могу помочь вам.