Компонент Fade In & Fade Out от родителя в реагирующем - PullRequest
Новая
       14

Компонент Fade In & Fade Out от родителя в реагирующем

0 голосов
/ 07 ноября 2019

Я разрабатываю функцию, при которой компонент (DoneButton) загружается впервые, когда он исчезает.

И когда он находится в родительском представлении при нажатии кнопки, (DoneButton) должен выходитьfade.

Ниже приведен код для компонента DoneButton, 

import * as React from 'react';
import { Easing,Text,StyleSheet, StatusBar, Button, View, Image, TouchableOpacity, Platform, Animated } from 'react-native';
import { Dimensions } from 'react-native';

import { widthPercentageToDP, heightPercentageToDP } from './utils';
import { useState, useEffect } from 'react';
import { RFPercentage, RFValue } from 'react-native-responsive-fontsize';

export default class DoneButton extends React.Component {

   state ={
     fadeAnim : this.props.value,
   }

    componentDidMount(){
      Animated.timing(this.state.fadeAnim,{toValue:1,duration:1200, easing: Easing.ease}).start();
    }

   componentWillReceiveProps(newProps) {
           Animated.timing(this.state.fadeAnim,{toValue:0,duration:1200, easing: 
           Easing.ease
            }).start();
    }
    
    render() {
      
        return (
            <Animated.View style={[styles.bottonCompleteView, {opacity:this.state.fadeAnim}]}>
              <TouchableOpacity
                activeOpacity={0.8}
                onPress={() => this.props.navigate('Home')}
                style={{ flex: 1 }}>
                <View style={styles.bottomViewRight}>
                  <Text adjustsFontSizeToFit style={styles.textStyleAfirmative}>
                    Done
                  </Text>
                </View>
              </TouchableOpacity>
            </Animated.View>
        );
    }
}
const styles = StyleSheet.create({
 textStyleAfirmative: {
    color: '#fff',
    fontSize: RFValue(16),
    fontWeight: 'bold',
  },

  bottonCompleteView: {
    flex: 1,
    flexDirection: 'row',
    width: '100%',
    bottom: 0,
    position: 'relative',
  },
  bottomViewRight: {
    flex: 1,
    backgroundColor: "#2D6AE0",
    justifyContent: 'center',
    alignItems: 'center',
    bottom: 0,
  },
  });

Ниже приведен фрагмент кода родительского компонента, 

<DoneButton visibility = {value = {this.state.value} navigate = {this.props.navigation.navigate}/>

Начальное значение: 0, Обновленное значение: 2, (Только для обновления реквизита)

Я не могу понять, как я могу исчезнуть DoneButton, я пробовал с подпорками. Но он не работает. Пожалуйста, помогите.

...