Question

我有一个ScrollView，其内容并不一定超过它的大小。让我们说它是一种形式，在出错时，它会扩展以添加错误消息，然后它会超过ScrollView大小，这就是我使用该卷轴的原因。

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

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

＆＃13;

<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);
  }}
>

＆＃13;

this.props.setScrollContentHeight触发一个进入状态高度的动作，this.props.scrollHeight表示高度。因此，在触发onLayout函数的第一个渲染之后，状态将使用ScrollView的height进行更新，然后我将其minHeight指定为其内容。

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

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

谢谢！

Answer 1

你应该在ScrollView中使用flexGrow: 1，在ScrollView中使用flex: 1来获得ScrollAble，但至少要尽可能大<View>。

有一个discussion about it in react-native和tushar-singh对它有好主意。

Answer 2

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

Answer 3

我知道这有点晚了，但我认为使用ScrollView View样式属性将minHeight内的内容包装起来就可以了。

Answer 4

我想分享我的解决方案，对我来说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 5

执行此操作的几种解决方案是：

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

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

Answer 6

<ScrollView contentContainerStyle={{ flexGrow: 1 }}>
  <View style={{ flexGrow: 1 }}>
    Your content
  </View>
</ScrollView>

对我有用。

ScrollView minHeight占用所有空间

6 个答案: