React Native Expo中用ScrollView实现Instagram Reels滚动效果及尺寸计算问题

我在App.js中尝试实现Instagram Reels滚动效果，使用了ScrollView组件。打印尺寸后发现screenHeight不等于windowHeight与statusBarHeight之和，恳请解释该现象的原因。

以下是我的代码：

import React from "react";

const screenHeight = Dimensions.get("screen").height;
const windowHeight = Dimensions.get("window").height;
const statusBarHeight = StatusBar.currentHeight;

const Box = ({ color }) => {
  return (
    <View style={[styles.box, { backgroundColor: color, height: screenHeight }]}>
      <Text> screenHeight is {screenHeight}</Text>
      <Text> windowHeight is {windowHeight}</Text>
      <Text> statusBarHeight is {statusBarHeight}</Text>
    </View>
  );
};

export default function FeedInspireScreen({ navigation }) {
  return (
    <ScrollView style={styles.scrollView} pagingEnabled>
      <StatusBar translucent backgroundColor="transparent" />
      <Box color="red" />
      <Box color="green" />
      <Box color="red" />
      <Box color="green" />
    </ScrollView>
  );
}
1;

const styles = StyleSheet.create({
  scrollView: {
    backgroundColor: "pink",
  },
  box: {
    width: "100%",
    justifyContent: "center",
    alignItems: "center",
  },
});

原因解释 #

• screen与window的定义差异：
  Dimensions.get("screen")获取的是设备整个屏幕的物理高度，包含所有系统固定UI元素（比如底部导航栏/手势条、顶部状态栏）的高度。而Dimensions.get("window")是当前应用可使用的窗口高度，即便设置了StatusBar translucent让窗口延伸到状态栏下方，若设备存在底部系统导航栏（如安卓虚拟按键、iOS底部手势条），windowHeight也不包含这部分高度。

• StatusBar.currentHeight的局限性：
  这个值仅对应顶部状态栏的高度，但screenHeight和windowHeight的差值除了状态栏，还可能包含底部系统导航栏/手势条的高度，只加状态栏自然无法等于整个屏幕高度。

• 初始化时机问题：
  你在组件外部直接获取Dimensions和StatusBar的值，这部分代码会在组件挂载前执行，此时部分系统UI的高度可能还未完成计算（比如部分安卓机型初始化阶段状态栏高度可能返回0或不准确值），导致最终计算出现偏差。

内容的提问来源于stack exchange，提问作者Harshit sharma