Expo React Native App生产环境顶部额外Padding问题求助

我基于Expo开发了一个React Native App，其中实现了SlideMenuContainer组件用于包裹主屏幕内容，点击菜单按钮时，屏幕内容会产生平滑的侧滑动画效果。

目前遇到的问题：开发环境下主首页内容布局完全正常，但生产环境中顶部padding似乎翻倍了。

SlideMenuContainer组件代码 #

import React, { useState, useRef } from "react";
import { Animated, TouchableOpacity, View } from "react-native";
import Constants from "expo-constants";

const SlideMenuContainer = ({
  toTheLeft,
  menu,
  page,
}: {
  toTheLeft?: boolean;
  menu: JSX.Element;
  page: (showMenu: boolean, toggleMenu: () => void) => JSX.Element;
}) => {
  // 菜单状态
  const [showMenu, setShowMenu] = useState(false);

  // 动画属性
  const offsetValue = useRef(new Animated.Value(0)).current;
  // 初始缩放值为1
  const scaleValue = useRef(new Animated.Value(1)).current;

  const toggleMenu = () => {
    Animated.timing(scaleValue, {
      toValue: showMenu ? 1 : 0.88,
      duration: 200,
      useNativeDriver: true,
    }).start();

    Animated.timing(offsetValue, {
      toValue: showMenu ? 0 : toTheLeft ? -240 : 240,
      duration: 200,
      useNativeDriver: true,
    }).start();

    setShowMenu(!showMenu);
  };

  return (
    <View className="relative h-full max-h-full bg-white">
        <View className={[toTheLeft ? "self-end" : "self-start"].join(" ")}>
          {menu}
        </View>
        <Animated.View
          style={{
            flexGrow: 1,
            position: "absolute",
            top: 0,
            bottom: 0,
            left: 0,
            right: 0,
            borderRadius: showMenu ? 15 : 0,
            overflow: "hidden",
            transform: [{ scale: scaleValue }, { translateX: offsetValue }],
          }}
        >
          <View
            className="flex-1"
          >
            <Animated.View
              className="flex-1 bg-lightest transition-all"
              style={{ 
                paddingTop: showMenu ? 0 : Constants.statusBarHeight
               }}
            >
              <TouchableOpacity
                onPress={() => showMenu && toggleMenu()}
                activeOpacity={showMenu ? 0.5 : 1}
                className="relative flex-grow"
              >
                {showMenu && (
                  <View className="absolute top-0 bottom-0 left-0 right-0 bg-gray-900/30 z-10" />
                )}
                {page(showMenu, toggleMenu)}
              </TouchableOpacity>
            </Animated.View>
          </View>
        </Animated.View>
    </View>
  );
};

组件使用方式 #

<SlideMenuContainer
  menu={<HomeDrawerMenu />}
  page={(showMenu, toggleMenu) => (
    <HomeScreenContent
      showMenu={showMenu}
      toggleMenu={toggleMenu}
      areCompletedVisible={areCompletedVisible}
    />
  )}
/>

我怀疑问题出在这一行代码：

paddingTop: showMenu ? 0 : Constants.statusBarHeight

但不确定为何仅在生产环境出现该问题，也不知如何修复。

截图说明 #

• 开发环境：顶部padding正常，内容与状态栏下方对齐，布局显示正确。
• 生产环境：顶部padding明显加倍，内容向下偏移过多，布局出现异常。

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