React Native - flex、ScrollView 和动态高度不填满屏幕

Question

我在 ScrollView 中有一个动态高度 - 在用户交互时，高度可以增加或减少。 ScrollView 有 flexGrow:1，里面的内容用 flex: 1 包裹在一个 View 周围。

但是，当我在面板底部降低高度时，我会在底部看到一个白色的 'overscroll-like space'，我只能通过向上拖动面板将其移除。（p.s我有 bounces={false} overScrollMode='never')

当屏幕高度降低时，如何删除过度滚动space。

P.S。我不想强制更新，因为有些内容我不想lost/updated。

Answer 1

I think, you have to adjust contentInset prop of ScrollView when you expand(increase height) and collpase(decrease height) your contents.

...
<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。希望这可以帮助。

React Native - flex, ScrollView and dynamic height not filling screen