在我的应用程序中，我创建了一个组件来 Package 我的主屏幕内容，因此当单击菜单按钮时，屏幕内容会显示动画并很好地滑到一边。
我的问题是，主要的家庭内容是奠定了完美的发展，但在生产，顶部填充似乎增加了一倍？
这是我的组件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;
}) => {
  // To get the current Status of menu ...
  const [showMenu, setShowMenu] = useState(false);

  // Animated Properties...
  const offsetValue = useRef(new Animated.Value(0)).current;
  // Scale Intially must be One...
  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

但我不知道为什么它只发生在生产或如何修复它。
我附上两个截图显示的问题，一个是开发，一个是生产
发展：https://imageupload.io/aMTBTD8hwjWSv5O
生产：https://imageupload.io/PrV53AUir2rU10I