15

我有一个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 将不会滚动。

您能想出一种方法来避免出于性能目的进行第二次渲染吗？

谢谢！

4

6 回答 6

22

您应该使用flexGrow: 1ScrollView 和 ScrollViewflex: 1内部，以获得 ScrollAble 但至少尽可能大<View>。

在 react-native 中有一个关于它的讨论，而tushar-singh对此有很好的想法。

于 2017-12-22T10:31:30.113 回答
16

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

于 2018-08-01T13:07:04.763 回答
7

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

  • 使用 a minHeight（ScrollView但这需要考虑到屏幕尺寸才能正确渲染）
  • 使用 a和 aflexGrow: 1到内部内容：ScrollView contentContainerStyleflex: 1
<ScrollView contentContainerStyle={{ flexGrow: 1 }}>
  <View style={{ flex: 1 }}>
    ...
  </View>
</ScrollView>
于 2019-07-16T11:36:49.163 回答
7

我想分享我的解决方案，对我来说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>
于 2019-07-31T04:21:32.727 回答
1

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

于 2016-11-17T03:47:59.253 回答
-3 
<ScrollView contentContainerStyle={{ flexGrow: 1 }}>
  <View style={{ flexGrow: 1 }}>
    Your content
  </View>
</ScrollView>

这对我有用。

于 2020-05-25T03:00:31.560 回答