Question

我一直遵循tutorial来创建一个React Context Provider，通过它我可以在React Native应用程序的所有选项卡和面板中都有一个常规面板。 Complete Expo Snack of the code here.

此“常规面板”（VideoModal.js）具有一个PanGestureHandler，如果向下滚动（在Y轴上），它将触发动画以将面板的尺寸调整为底部的某个小模式屏幕的一部分。（类似于YouTube，SoundCloud，Spotify和Apple Music播放器）。动画看起来像这样：

// 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,
    });

（Full code available to test on emulators from Expo Snack）

我的问题是，无论屏幕大小或OS（iOS / Android）如何，我都不知道如何将模式放置在我的底部标签上方。

在this Github issue中，我发现制表符的高度为49或29。我一直在尝试尝试这些值，例如：

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

但是模态永远不会在期望的位置。有时它会与底部选项卡（iPhone X，XS，XR）重叠，有时离它们太远（iPhone 6,7,8）。我似乎从来没有使它完全适合这些选项卡的上方，而这两个选项卡之间没有空格。

任何对此的帮助将不胜感激。

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

0 个答案: