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

Question

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

但是，当在面板底部降低高度时，我会在底部看到一个白色的“过度滚动状空间”，我只能通过向后拖动面板来将其删除。(p.s我有 ounces={false} overScrollMode='never')

当屏幕降低高度时如何消除过度滚动空间。

附注我不想想要强制更新，因为有些内容我不希望丢失/更新。

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