React native 检测单击了哪个TapGestureHandler？

我是React-Native新手，我想用React-Native制作一些动画。 我已经使用youtube视频指南创建了代码。 在这段代码中，当我们按“登录”时，它将显示带有动画的登录表单

我的挑战是现在我想注册按钮，以及动画一样，登录按钮

但变化是层的高度。如何检测按下了哪个tapgesturehandler，以便根据按钮设置解决问题的变量。 下面是它的完整代码

import React, { Component } from 'react';
import { View, Text, StyleSheet, Dimensions,TextInput,Alert,TouchableOpacity } from 'react-native';

import Animated, { Easing } from 'react-native-reanimated';
import { TapGestureHandler, State } from 'react-native-gesture-handler';
import Svg,{Image,Circle, ClipPath} from 'react-native-svg';

const { width, height } = Dimensions.get('window');

const {
  Value,
  event,
  block,
  cond,
  eq,
  set,
  Clock,
  startClock,
  stopClock,
  debug,
  timing,
  clockRunning,
  interpolate,
  Extrapolate,
  concat,
} = Animated;

function runTiming(clock, value, dest) {
  const state = {
    finished: new Value(0),
    position: new Value(0),
    time: new Value(0),
    frameTime: new Value(0)
  };

  const config = {
    duration: 500,
    toValue: new Value(0),
    easing: Easing.inOut(Easing.ease),
    useNativeDriver: true
  };

  return block([
    cond(clockRunning(clock), 0, [
      set(state.finished, 0),
      set(state.time, 0),
      set(state.position, value),
      set(state.frameTime, 0),
      set(config.toValue, dest),

      startClock(clock)
    ]),
    timing(clock, state, config),
    cond(state.finished, debug('stop clock', stopClock(clock))),
    state.position
  ]);
}

class Login extends Component {

  constructor() {
    super();
    this.selDiv= 3;

    this.buttonOpacity = new Value(1);
    this.buttonOpacityReg = new Value(1);

    this.onStateChange = Animated.event([{
        nativeEvent: ({ state }) =>
          block([
            cond(
              eq(state, State.END),
              set(this.buttonOpacity, runTiming(new Clock(), 1, 0))
            )
          ])
      }
    ],
    {
        useNativeDriver: true,
        listener: (event) => {
            alert("Signin")
        }
    }   
    
    
    );



    


    this.onCloseState  =  event([
      {
        nativeEvent: ({ state }) =>
          block([
            cond(
              eq(state, State.END),
              set(this.buttonOpacity, runTiming(new Clock(), 0, 1))
            )
          ])
      }
    ]);




    this.buttonY = interpolate(this.buttonOpacity, {
      inputRange: [0, 1],
      outputRange: [100, 0],
      extrapolate: Extrapolate.CLAMP, 
    useNativeDriver: true
    });

    this.bgY = interpolate(this.buttonOpacity, {
      inputRange: [0, 1],
      outputRange: [-height / this.selDiv - 50, 0],
      extrapolate: Extrapolate.CLAMP,
      useNativeDriver: true
         });
    
    

    this.textInputZindex = interpolate(this.buttonOpacity, {
      inputRange: [0, 1],
      outputRange: [1,-1],
      extrapolate: Extrapolate.CLAMP,
    useNativeDriver: true
    });

    this.textInputY = interpolate(this.buttonOpacity, {
      inputRange: [0, 1],
      outputRange: [0, 100],
      extrapolate: Extrapolate.CLAMP,
    useNativeDriver: true
    });

    this.textInputOpacity = interpolate(this.buttonOpacity, {
      inputRange: [0, 1],
      outputRange: [1, 0],
      extrapolate: Extrapolate.CLAMP,
    useNativeDriver: true
    });

    this.rotateCross= interpolate(this.buttonOpacity, {
      inputRange: [0, 1],
      outputRange: [180, 360],
      extrapolate: Extrapolate.CLAMP,
    useNativeDriver: true
    });
 

 

  };



  render() {
    return (
      <View
        style={{
          flex: 1,
          backgroundColor: 'white',
          justifyContent: 'flex-end'
        }}
      >
        <Animated.View
          style={{
            ...StyleSheet.absoluteFill,
            transform: [{ translateY: this.bgY}]
          }}
        >
            <Svg height={height + 50} width={width}>
            <ClipPath id="clip">
                <Circle r={height + 50} cx={width / 2} />
            </ClipPath>
          <Image
            href={require('../../assets/bg.png')}
            width={width}
            height={height + 50}
            preserveAspectRatio="xMidYMid slice"
            clipPath="url(#clip)"
          />
              </Svg>
        </Animated.View>
        <View style={{ height: height / 2, justifyContent: 'center' }}>
          <TapGestureHandler onHandlerStateChange={this.onStateChange}>
            <Animated.View
              style={{
                ...styles.buttonWhite,
                opacity: this.buttonOpacity,
                transform: [{ translateY: this.buttonY }]
              }}
            >
              <Text style={{ fontSize: 20, fontWeight: 'bold' }}>SIGN IN</Text>
            </Animated.View>
          </TapGestureHandler>
            
          

            <Animated.View
              style={{
                ...styles.buttonWhite,
                opacity: this.buttonOpacity,
                transform: [{ translateY: this.buttonY }]
              }}
            >
            
              <Text style={{ fontSize: 20, fontWeight: 'bold' }}>Sign up</Text>
            </Animated.View>
            
          <Animated.View
            style={{
              ...styles.button,
              backgroundColor: '#000000',
              opacity: this.buttonOpacity,
              transform: [{ translateY: this.buttonY }]
            }}
          > 
                    <Text style={{ fontSize: 20, fontWeight: 'bold', color: 'white' }}>
                      SIGN IN WITH APPLE
                    </Text>
          </Animated.View>
              <Animated.View 
                  style={{
                  zIndex: this.textInputZindex,
                  opacity: this.textInputOpacity, 
                  transform: [{ translateY: this.textInputY }], 
                  height: height/3,
                  ...StyleSheet.absoluteFill, 
                  top: null,
                  justifyContent: 'center'}}
              >
                    <TapGestureHandler onHandlerStateChange={this.onCloseState} >
                        <Animated.View style={styles.closeButton}>
                            <Animated.Text style={{fontSize:15, transform:[{rotate: concat(this.rotateCross,'deg')}]}}>X</Animated.Text>
                        </Animated.View>
                    </TapGestureHandler>

                 
                      <TextInput placeholder="Email Address" style={styles.textInput} placeholderTextColor="black" /> 
                      <TextInput placeholder="Password" style={styles.textInput} placeholderTextColor="black" /> 
                      <Animated.View style={{...styles.button}}>
                        <Text style={{ fontSize: 20, fontWeight: 'bold' }}>SIGN IN</Text>
                    </Animated.View>
                
            
              </Animated.View>

        
        </View>
      </View>
    );
  }
}
export default Login;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center'
  },
  button: {
    backgroundColor: 'white',
    height: 70,
    marginHorizontal: 20,

    borderRadius: 35,
    alignItems: 'center',
    justifyContent: 'center',
    marginVertical: 5,
        shadowOffset:{width:2,height:2},
        shadowColor:'black',
        shadowOpacity:0.2,
  },
  buttonWhite: {
    backgroundColor: 'white',
    height: 70,
    marginHorizontal: 20,

    borderRadius: 35,
    alignItems: 'center',
    justifyContent: 'center',
    marginVertical: 5,
        shadowOffset:{width:2,height:2},
        shadowColor:'white',
        shadowOpacity:0.3,
  },
    textInput: {
    height:50,
    borderWidth:0,
        borderBottomWidth:1,
    marginHorizontal:20,
    paddingLeft:10,
    marginVertical:5,
    borderColor:'rgba(0,0,0,0.5)'
    },
    closeButton:{
    height:40,
        width:40,
        backgroundColor:'white',
        borderRadius:20,
        alignItems:'center',justifyContent:'center',
        position:'absolute',
        top:-20,
        left: width/2 - 20,
        shadowOffset:{width:2,height:2},
        shadowColor:'black',
        shadowOpacity:0.2,


    }
});

import React，{Component}来自'React'；
从“react native”导入{View，Text，StyleSheet，Dimensions，TextInput，Alert，TouchableOpacity}；
从“react native reanimated”导入动画，{Easing}；
从“反应本机手势处理程序”导入{TapGestureHandler，State}；
从'react native Svg'导入Svg，{Image，Circle，ClipPath}；
const{width，height}=Dimensions.get（'window'）；
常数{
价值
事件
块
康德，
情商，
设置
时钟，
startClock，
秒钟，
调试，
时间，
时钟运行，
插入，
外推，
康卡特，
}=动画；
函数运行定时（时钟、值、目标）{
常量状态={
已完成：新值（0），
位置：新值（0），
时间：新值（0），
帧时间：新值（0）
};
常量配置={
持续时间：500，
toValue:新值（0），
放松：放松。输入输出（放松。放松），
useNativeDriver：真的吗
};
返回块([
康德（时钟运行），0[
设置（state.finished，0），
设置（state.time，0），
设置（状态、位置、值），
设置（state.frameTime，0），
设置（config.toValue，dest），
StartLock（时钟）
]),
定时（时钟、状态、配置），
cond（state.finished，debug（'stop clock'，stop clock（clock）），
状态
]);
}
类登录扩展组件{
构造函数（）{
超级（）；
selDiv=3；
this.buttonOpacity=新值（1）；
this.buttonOpacityReg=新值（1）；
this.onStateChange=Animated.event([{
nativeEvent:（{state}）=>
挡块([
康德(
等式（状态，状态结束），
设置（this.ButtonCapacity，runTiming（新时钟（），1，0））
)
])
}
],
{
useNativeDriver：没错，
侦听器：（事件）=>{
警报（“签名”）
}
}   
);
this.onCloseState=事件([
{
nativeEvent:（{state}）=>
挡块([
康德(
等式（状态，状态结束），
设置（this.ButtonCapacity，runTiming（新时钟（），0，1））
)
])
}
]);
this.buttonY=插值（this.buttonOpacity{
输入范围：[0，1]，
输出范围：[100,0]，
外推法：外推法，
useNativeDriver：真的吗
});
this.bgY=插值（this.buttonCapity{
输入范围：[0，1]，
outputRange:[-height/this.selDiv-50,0]，
外推法：外推法，
useNativeDriver：真的吗
});
this.textInputZindex=插值（this.buttonOpacity{
输入范围：[0，1]，
输出范围：[1，-1]，
外推法：外推法，
useNativeDriver：真的吗
});
this.textInputY=插值（this.buttonCapacity{
输入范围：[0，1]，
输出范围：[01100]，
外推法：外推法，
useNativeDriver：真的吗
});
this.textinputocapity=插值（this.buttonapacity{
输入范围：[0，1]，
outputRange:[1,0]，
外推法：外推法，
useNativeDriver：真的吗
});
this.rotateCross=interpolate（this.buttonOpacity{
输入范围：[0，1]，
输出范围：[180360]，
外推法：外推法，
useNativeDriver：真的吗
});
};
render（）{
返回(
登录
注册
使用APPLE登录
X
登录
);
}
}
导出默认登录；
const styles=StyleSheet.create({
容器：{
弹性：1，
对齐项目：“居中”，
为内容辩护：“中心”
},
按钮：{
背景颜色：“白色”，
身高：70，
marginHorizontal:20，
边界半径：35，
对齐项目：“居中”，
为内容辩护：“中心”，
第五名：，
阴影偏移：{宽度：2，高度：2}，
阴影颜色：'黑色'，
阴影不透明度：0.2，
},
按钮白色：{
背景颜色：“白色”，
身高：70，
marginHorizontal:20，
边界半径：35，
对齐项目：“居中”，
为内容辩护：“中心”，
第五名：，
阴影偏移：{宽度：2，高度：2}，
阴影颜色：'白色'，
阴影不透明度：0.3，
},
文本输入：{
身高：50，
边框宽度：0，
边界宽度：1，
marginHorizontal:20，
paddingLeft:10，
第五名：，
边框颜色：'rgba（0,0,0,0.5）'
},
关闭按钮：{
身高：40，
宽度：40，
背景颜色：'白色'，
边界半径：20，
alignItems:'center'，justifyContent:'center'，
位置：'绝对'，
前-20名，
左：宽度/2-20，
阴影偏移：{宽度：2，高度：2}，
阴影颜色：'黑色'，
阴影不透明度：0.2，
}
});