React Native - flex,ScrollView和动态高度不填充屏幕

Question

我在ScrollView中有一个动态高度 - 在用户交互时,高度可以增加或减少.ScrollView已经flexGrow:1和里面的内容围绕一个View with flex: 1.

然而,当在面板底部降低高度时,我在底部得到一个白色的"过度滚动状空间",我只能通过向后拖动面板来移除它.(ps我有bounces={false} overScrollMode='never')

当屏幕降低高度时,如何删除过度滚动空间.

PS我不希望forceUpdate因为有内容,我不希望丢失/更新.

Answer 1

我认为，当您展开（增加高度）和折叠（减少高度）内容时，您必须调整contentInset道具。ScrollView

...
<ScrollView
    automaticallyAdjustContentInsets={false}
    contentInset={{top:0, bottom: this.state.contentInsetBottom }}
 >
...

您可以有一些预定义的值，例如

const bottom_initial = 0;
const arbitrary_move_value = 100;

在你的状态下，

this.state={
  contentInsetBottom: bottom_initial
}

当您展开或折叠时，计算适当的移动值并更改contentInset.

this.setState({
  contentInsetBottom: arbitrary_move_value
})

这只是一个想法。你要计算合适的contentInset。希望这可以帮助。