React Native LayoutAnimation scrollView容器大小

Question

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

Example image

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

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>
    );
  }