ReactNative：无法按下Animated.View的事件父组件

Question

我一直跟随着DesignCode的教程，作者包装了AnimatedContainer和TouchableWithoutFeedBack事件的onPress（一个createAnimatedComponent）。在他的录音中，他能够按下卡并将其放大，但是即使我仅在其中放置console.log回调，我似乎也无法调用onPress行为。

我在这里错过了什么吗？据我所知，我已经针对他的代码进行了审查。不再支持onPress行为吗？

 <TouchableWithoutFeedback onPress={this.openCard}>
        <AnimatedContainer
          style={{ width: this.state.cardWidth, height: this.state.cardHeight }}
        >
          <Cover>
            <Image source={this.props.image} />
            <AnimatedTitle style={{ top: this.state.titleTop }}>
              {this.props.title}
            </AnimatedTitle>
            <Author>by {this.props.author}</Author>
          </Cover>
          <Text>{this.props.text}</Text>
        </AnimatedContainer>
 </TouchableWithoutFeedback>

完整组件

import React, { Component } from "react";
import styled from "styled-components";
import {
  Animated,
  TouchableWithoutFeedback,
  TouchableOpacity,
  Dimensions,
  StatusBar
} from "react-native";

const screenWidth = Dimensions.get("window").width;
const screenHeight = Dimensions.get("window").height;
const tabBarHeight = 83;

class Project extends Component {
  state = {
    cardWidth: new Animated.Value(315),
    cardHeight: new Animated.Value(460),
    titleTop: new Animated.Value(20)
  };

  openCard = () => {
    console.log("hello?");
    Animated.spring(this.state.cardWidth, { toValue: screenWidth }).start();
    Animated.spring(this.state.cardHeight, {
      toValue: screenHeight - tabBarHeight
    }).start();
    Animated.spring(this.state.titleTop, { toValue: 40 });
    StatusBar.setHidden(true);
  };

  render() {
    return (
      <TouchableWithoutFeedback onPress={this.openCard}>
        <AnimatedContainer
          style={{ width: this.state.cardWidth, height: this.state.cardHeight }}
        >
          <Cover>
            <Image source={this.props.image} />
            <AnimatedTitle style={{ top: this.state.titleTop }}>
              {this.props.title}
            </AnimatedTitle>
            <Author>by {this.props.author}</Author>
          </Cover>
          <Text>{this.props.text}</Text>
        </AnimatedContainer>
      </TouchableWithoutFeedback>
    );
  }
}

export default Project;