animation - React Native LayoutAnimation scrollView 容器大小

Question

我有一些组件包装在 ScrollView 中，并且在某些情况下，最底部的组件不应该呈现。发生这种情况时，我使用 LayoutAnimation 来隐藏它。问题是，当组件消失时，ScrollView 直接跳转到新的内容高度，根本没有任何动画。我想使用 LayoutAnimation 因为我的屏幕内容高度未知。

示例图片

如果你看图像，当按下按钮时，屏幕会立即跳转到蓝色框，没有任何动画。

state = { showGreenBox: false };

  renderBottomBox() {
    if (this.state.showGreenBox) {
      return (
        <View style={{ height: 300, width: 100, backgroundColor: 'green' }} />
      );
    }
  }

  render() {
    return (
      <ScrollView>
        <View style={{ height: 300, width: 100, backgroundColor: 'red' }} />
        <View style={{ height: 300, width: 100, backgroundColor: 'blue' }} />
        {this.renderBottomBox()}

        <TouchableOpacity
          onPress={() => {
            LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);
            this.setState({ showGreenBox: !this.state.showGreenBox });
          }}
        >
          <Text>Press to collapse green box</Text>
        </TouchableOpacity>
      </ScrollView>
    );
  }