ScrollView minHeight占用了所有空间

Question

我有一个ScrollView内容不一定超过它的大小.让我们说这是一个表单,在出错时,它会扩展为添加错误消息然后超出ScrollView大小,这就是我使用该滚动的原因.

问题是我希望内容始终至少与ScrollView的大小相同.我知道该minHeight属性,但我发现使用它的唯一方法是重新渲染,我想避免.

我正在使用redux进行状态管理,这就是我所拥有的

<ScrollView
  contentContainerStyle={[ownStyles.container, {minHeight: this.props.scrollHeight}]}
  style={this.props.style}
  showsVerticalScrollIndicator={false}
  onLayout={(event) => {
    scrollHeight = event.nativeEvent.layout.height;
    this.props.setScrollContentHeight(scrollHeight);
  }}
>

其中this.props.setScrollContentHeight触发入射的状态下的高度的动作,和this.props.scrollHeight被所述高度.因此,在触发onLayout函数的第一个渲染之后,使用ScrollView更新状态height,然后我将minHeight其分配给其内容.

如果我将内容的样式设置为,flex: 1则ScrollView将不会滚动.

你能想出一种避免第二次渲染以达到性能目的的方法吗？

谢谢!

Answer 1

您应该使用flexGrow: 1ScrollView和ScrollView flex: 1内部来获取ScrollAble,但至少要尽可能大<View>.

在反应原生中有一个关于它的讨论,而tushar-singh对它有好主意.

Answer 2

这样做的几个解决方案是：

• 在minHeight上使用a ScrollView（但这需要考虑屏幕尺寸才能正确呈现）
• 使用flexGrow: 1上ScrollView contentContainerStyle和flex: 1以内部内容：

<ScrollView contentContainerStyle={{ flexGrow: 1 }}>
  <View style={{ flex: 1 }}>
    ...
  </View>
</ScrollView>

Answer 3

我想分享我的解决方案，对我来说https://github.com/facebook/react-native/issues/4099没有任何效果。我也不能在那里发表评论，因为 facebook 阻止了线程 ¬.¬ ！

基本上我的解决方案是flexGrow: 1在组件中设置contentContainerStyle的ScrollView，并将所有内容包装在一个View组件中，并使用height设置为屏幕大小的属性。这里的示例代码：

import { Dimensions } from "react-native";

let screenHeight = Dimensions.get('window').height;

<ScrollView contentContainerStyle={{ flexGrow: 1 }}>
   <View style={{height: screenHeight}}>
    ... your content here ...
   </View>
</ScrollView>

Answer 4

已经有很长时间了，但是我为同样的问题而苦苦挣扎。最简单的方法是使用flexGrow: 1而不是flex:1同时在scrollView style和contentContainerStyleprops上使用。内容将至少占用100％的空间，并在需要时占用更多空间。

Answer 5

我知道这有点晚了，但我认为ScrollView用Viewwith minHeightstyle 属性将其中的内容包装起来就可以了。