时间戳

首页 > 解决方案 > ScrollView 子项相对于容器的高度

react-native - ScrollView 子项相对于容器的高度

问题描述

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

标签： react-nativereact-native-flatlistreact-native-scrollviewreact-native-flexbox

解决方案

由于 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

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

注意：我将这个外部库用于插图。

推荐阅读