ScrollView 子项相对于容器的高度

Question

我想创建一个反应原生的可滚动视图提要，其高度占容器的 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。谢谢！

Answer 1

ScrollView 的身高百分比似乎在 Android 上被打破了。你能删除你所有的身高并在你的 ScollView 顶部添加一个 View 组件，其 flex 为 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: {

  },
});

Answer 2

由于 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 作为插图。

Answer 3

只需进行这些更改

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

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

ScrollView 子项相对于容器的高度

ScrollView children height relative to container

react-native

react-native-scrollview

react-native-flexbox

react-native-flatlist