ScrollView 子项相对于容器的高度答案

【问题标题】：ScrollView children height relative to containerScrollView 子项相对于容器的高度
【发布时间】：2025-12-17 19:50:02
【问题描述】：

我希望创建一个反应原生的可滚动视图提要，其高度为容器的 80%。我的代码目前看起来像

const FeedItem = () => (
  <View style={styles.feedItem}>
    <Text>Hello</Text>
  </View>
);

const Feed = () => (
  <ScrollView style={styles.feed} contentContainerStyle={styles.feedContentContainer}>
    <FeedItem />
    <FeedItem />
    <FeedItem />
  </ScrollView>
);

const App = () => (
  <View style={styles.app}>
    <Feed />
  </View>
);

const styles = StyleSheet.create({
  app: {
    flex: 1,
  },
  feed: {
    height: '100%',
  },
  feedContentContainer: {
    height: '80%',
  },
  feedItem: {
    height: '100%',
  },
});

但是，这会导致滚动视图不再滚动。根据我所读到的内容，这与 flex 有关，我已经尝试了很多方法来解决这个问题，连续 2 天无济于事。有谁知道在不打乱视图滚动的情况下设置高度的正确方法？

我在 FlatList 中也遇到了同样的问题，所以希望 ScrollView 的答案也适用于 FlatList。谢谢！

【问题讨论】：

这可以帮助*.com/questions/38942869/…
谢谢@CR7，我看过那篇文章，甚至在styles.feed 中添加height: 100 或height: '100%' 或flex: 1 都没有成功。 :(
尝试在滚动视图顶部的 Feed 组件内添加一个带有 flex 1 的新
还是没有运气。 :( 即使 ScrollView 位于 flex: 1 View 中，在 styles.feed 中设置高度也无济于事

标签： react-native react-native-flatlist react-native-scrollview react-native-flexbox

【解决方案1】：

由于 ScrollView 没有自己的高度，它的高度取决于其子项。最好设置子节点的高度。

例如如果您将子项的高度设置为超出设备全高的 80%。

我们可以这样做

import { useSafeArea } from 'react-native-safe-area-context';
import { Dimensions } from "react-native";
const insets = useSafeArea();
const { height } = Dimensions.get("window");

在你的 JS 中

height: ((height - insets.top - insets.bottom) * 80(your percentage))/ 100

您将此高度设置为子元素。

注意：我使用这个外部library 插入。

【讨论】：

非常详尽的解释。谢谢！

【解决方案2】：

ScrollView 的高度百分比在 Android 上似乎被破坏了。你能去掉你所有的身高，然后在你的ScollView 上添加一个View 组件，其弹性为 0.8

另外，如果FeedItem 的文字没有填满ScrollView 的所有高度，它将不会滚动，因此您可以在FeedItem 上添加更多文字。

const FeedItem = () => (
  <View style={styles.feedItem}>
    <Text>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua.
          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
          aliquip ex ea commodo consequat.
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua.
          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
          aliquip ex ea commodo consequat.
          </Text>
  </View>
);

const Feed = () => (
  <View style={{ flex: 0.8}}>
    <ScrollView style={styles.feed} contentContainerStyle={styles.feedContentContainer} scrollEnabled>
      <FeedItem />
      <FeedItem />
      <FeedItem />
      <FeedItem />
    </ScrollView>
  </View>
);

const App = () => (
  <View style={styles.app}>
    <Feed />
  </View>
);

const styles = StyleSheet.create({
  app: {
    flex: 1,
  },
  feed: {

  },
  feedContentContainer: {

  },
  feedItem: {

  },
});

【讨论】：

【解决方案3】：

只需进行这些更改

const styles = StyleSheet.create({
  app: {
    flex: 1,
  },
  feed: {
    height: '100%',
  },
  feedContentContainer: {
    //height: '80%',
  },
  feedItem: {
    //height: '100%',
    flexGrow: 1
  },
});

永远不要为滚动视图内容容器设置任何高度。并且每个子元素不应该有 100% 的高度，因为它占用了整个容器并且不让其他子元素

【讨论】：