React Native将视图的宽度和高度展开和折叠到全屏

Question

我已经创建了react native expo应用程序，目前正在使用react native日历模块。在我的应用程序中，我有一个议程屏幕。在屏幕上，我有多个不同的项目，当单击这些项目时，我希望它们可以缩放到全屏动画，类似于Google日历应用程序。

我曾尝试将高度和宽度设置为与屏幕的高度和宽度相同的动画，但这只是将议程列表中的项目设置为适当的动画，因此宽度和高度不在屏幕上，而是设置为全屏。我也曾尝试在设置动画时设置绝对位置，但这也不起作用。

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

    Animated.parallel([
      Animated.timing(this.height, {
        toValue : height,
        duration : 600,
        easing : Easing.linear
      }).start(),
      Animated.timing(this.width, {
        toValue : width,
        duration : 600,
        easing : Easing.linear
      }).start()
    ])

  }

此处的代码控制高度和宽度的扩展

<Animated.View style={[styles.item, {backgroundColor: this.props.item.type === 'HOMEWORK' ? this.props.item.color : '#fff', height : this.height, width : this.width, position: this.height > 67 ? 'absolute' : 'relative',}]}>
  <TouchableOpacity onPress = {() => this.expand() } style = {{flex : 1, flexDirection : 'row'}}>


  </TouchableOpacity>
</Animated.View>

影片动画： https://i.imgur.com/Mw3m6vv.mp4

我希望视图会占据整个屏幕，但是由于它嵌套在许多项目中，因此无法正常工作。它只占用它嵌套的部分。请参见下文：