0

我使用允许滚动的库。它可以完成这项工作，但问题是存在一个错误，即视图扩展了最大视图的高度。所以第一个视图下面会有很大的空隙。请注意，它仅在组件首次呈现并在我滚动到另一个视图并滚动回第一个视图时消失时才会发生。如果我滚动到另一个视图并返回并且它是库中可用的 animateHeight 道具的结果，基本上问题会自行解决。当视图发生变化时，它基本上会调整高度。但是，我认为每当组件首次呈现（页面刷新后）时我仍然在第一个视图中看到它的原因是因为没有检测到任何更改。所以随着越来越多的用户抱怨这个问题，图书馆引入了这个新功能。它被称为

更新高度

功能。

这是他们在库的此 updateHeight 函数的拉取请求中使用的代码：

  componentDidUpdate(prevProps) {
    // If animateHeight is on
    // and has changed children, readjust height
    const { animateHeight, children } = this.props;
    if (animateHeight === true && prevProps.children !== children) {
      this.updateHeight();
    }
  }

然而，这也没有成功。基本上这个函数应该做的是检测孩子何时改变并相应地更新高度。

所以我所做的是进入 SwipeableViews 容器的子项并执行 componentDidMount/componentWillMount/shoudComponentUpdate

但是，它仍然没有bueno。我有什么遗漏吗？

请参阅我的 SwipeableViews 容器代码：

<SwipeableViews
        action={(actions) => {
          this.swipeableActions = actions;
        }}
        index={currentTab}
        onChangeIndex={
          this.setCurrentTable
        }
        containerStyle={this.useSwipeableViewContainerStyles()}
        animateHeight>
        <div>
          <FoodsTable
            updateHeight={this.UpdateSwipeableViewHeight}
            ref={this.defaultTableRef} />
        </div>
        <div>
          <SportsTable
            updateHeight={this.UpdateSwipeableViewHeight}
             />
        </div>
        <div>
          <BarTable
            updateHeight={this.UpdateSwipeableViewHeight} />
        </div>
        <div>
          <RotationTable
            updateHeight={this.UpdateSwipeableViewHeight}
             />
        </div>
      </SwipeableViews>
4

0 回答 0