Javascript React Native-底部选项卡正上方的动画模式

我一直在遵循创建React上下文提供程序的步骤，通过它，我可以在React本机应用程序的所有选项卡和面板上拥有一个通用面板

这个“通用面板”（

VideoModal.js

）有一个向下滚动（在Y轴上）时会触发动画，将面板调整为屏幕底部某处的小模式。（类似于YouTube、SoundCloud、Spotify和苹果音乐播放器）。动画如下所示：

// minimum height of the modal after animation has finished
const minHeight = 64;
// Position at which height of screen will shrink completely
const midBound = height - 64 * 3;
const upperBound = midBound + minHeight;

const containerHeight = interpolate(translateY, {
      inputRange: [0, midBound],
      // height is taken from Dimensions, basically screen height
      outputRange: [height, 0],
      extrapolate: Extrapolate.CLAMP,
    });
const videoWidth = interpolate(translateY, {
      inputRange: [0, midBound, upperBound],
      outputRange: [width, width - 16, PLACEHOLDER_WIDTH],
      extrapolate: Extrapolate.CLAMP,
    });
const videoHeight = interpolate(translateY, {
      inputRange: [0, midBound],
      outputRange: [width / 1.78, minHeight * 1.3],
      extrapolate: Extrapolate.CLAMP,
    });

（）

我的问题是，无论屏幕大小或操作系统（iOS/Android）如何，我都不知道如何将模式放在底部选项卡的正上方

在中，我发现选项卡的高度为

49

或

29

。我一直在尝试这些价值观，例如：

const midBound = height - 49 * 1/2/3;

但模态永远不会处于理想的位置。有时它会与底部标签重叠（iPhoneX、XS、XR），有时它会离底部标签太远（iPhone6、7、8）。我似乎从来没有使它完全适合上面的标签没有空间之间的这两个

任何有关这方面的帮助都将不胜感激