使用 React Navigation 制作离开屏幕的动画

Question

我正在开发一个使用 React Navigation 的 React Native 应用程序 管理屏幕之间的路由。

我知道在 Egghead.io 上阅读 React Navigation documentation 和观看 this video（强烈建议），可以为将 transitionConfig 属性传递给 StackNavigator 的屏幕之间的转换定义自定义动画。

例如，下面的代码定义了一个向左滑动动画，它基本上是iOS默认推送动画的镜像：

const TransitionConfig = () => ({
    screenInterpolator: ({ layout, position, scene }) => {
        const { index } = scene
        const { initWidth } = layout

        const translateX = position.interpolate({
            inputRange: [index - 1, index, index + 1],
            outputRange: [-initWidth, 0, 0],
        })

        return {
            transform: [{ translateX }],
        }
    }
})

const MyNavigator = createStackNavigator(
    {
        A: {screen: ScreenA},
        B: {screen: ScreenB},
    },
    { transitionConfig: TransitionConfig }
)

考虑到上面的代码和我们从屏幕A 导航到屏幕B 的事实，screenInterpolator 函数体基本上描述了屏幕B 应该跟随的动画它何时会出现 （消失时恢复原状）。在这种情况下，代码将屏幕B 沿X 轴平移以实现滑入 效果。

是否也可以为正在消失的屏幕（在我们的例子中为屏幕A）定义动画？我想定义这样的东西：

• B 应该出现从左向右滑动
• A 应该消失从上到下滑动

Answer 1

我自己找到了答案，希望以后能帮助到别人。

假设screenInterpolator 仅描述屏幕B 的行为，我错了，因为实际上描述了A 和B 的动画。或者更好的是，interpolate 函数与 inputRange 和 outputRange 允许您描述进入 (B) 和离开 (A) 屏幕的动画。

让我们仔细看看这个 sn-p，记住 interpolate 函数只是在 inputRange 和 outputRange 的值之间创建 1-1 关联（更深入的解释 here）。

const { index } = scene

const translateX = position.interpolate({
    inputRange:  [index - 1, index, index + 1],
    outputRange: [-initWidth, 0, 0],
})

假设：

• B 和 A 是屏幕
• 我们正在从A 导航到B
• width(B) = width(A) = 320
• width(deviceScreen) = 320
• initWidth = 320

说明

• index-1 表示将要出现的屏幕（屏幕B），它映射到-initWidth。有了这个，我们说它将出现的屏幕（屏幕B）应该是X-平移（尊重视口）的值等于它的宽度。所以它会从X = 320（即屏幕外）开始动画
• index 表示将要出现的屏幕，但出现过一次（仍然是屏幕B）。将其映射到0 我们是说屏幕B 一旦出现就应该在X = 0 的位置
• index + 1 代表屏幕曾经将要消失。这就是导致我犯错误的原因。一开始我以为这仍然是只是屏幕B，但就在它会因为B->C之类的导航而消失的时候。但是从我们A->B 的角度来看，屏幕A 将会消失！所以这两种思路都是正确的，都是从不同的角度看待事物。因此，将index+1 映射到0 我们是说屏幕A 应该在它消失时（即B 出现时）停留在X=0

结果

这是上面代码实现的动画。如您所见，屏幕A 保持原样，因为关联index+1 <-> 0（没有翻译，因此屏幕A 没有动画）。

如果我们将index+1 的关联更改为index+1 <-> -initWidth，那么屏幕A 也将被翻译并因此动画:)

const translateX = position.interpolate({
  inputRange:  [index - 1, index, index + 1],
  outputRange: [initWidth, 0, -initWidth],
})

---