Question

我正在开发一种功能，该功能在第一次加载组件（DoneButton）时会淡入。

当在父视图中单击按钮时，（DoneButton）应淡出。

下面是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，但是它不起作用。请帮忙。

在本机中从父项淡入和淡出组件

0 个答案: