Reactjs 使用React导航设置离开屏幕的动画

我正在开发一个React本机应用程序，它使用 管理屏幕之间的路由

我知道在Egghead.io（强烈建议）上阅读和观看可以为通过

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

在出现时应该跟随的动画（当它消失时会恢复）。在本例中，代码表示沿X轴平移屏幕

B

，以实现滑动效果

是否也可以为正在消失的屏幕定义动画（在本例中，屏幕

A

）？我想定义如下：

• B

  应出现从左向右滑动

• A

  应该消失从上到下滑动

---

我自己找到了答案，希望将来能帮助别人
我错误地认为

screenprointerpolator

只描述了屏幕

B

的行为，因为它实际上描述了

A

和

B

的动画。或者更好的是，它是带有

inputRange

和

outputRange

的

interpolate

函数，允许您描述进入（

B

）和离开（

A

）屏幕的动画
让我们更仔细地看一下这个片段，请记住，

interpolate

函数只是在

inputRange

和

outputRange

的值之间创建1-1关联（更深入的解释）
假设：

• B

  和

  A

  是屏幕
• 我们正在从

  A

  导航到

  B

• width（B）=width（A）=320

• 宽度（设备屏幕）=320

• initWidth=320

解释

• index-1

  表示将要显示的屏幕（屏幕

  B

  ），它被映射到

  -initWidth

  。这样我们就可以说，它将要出现的屏幕（screen

  B

  ）应该是X平移的（相对于视口），其值等于它的宽度。因此，它将从

  X=320

  （即屏幕外）启动动画

• 索引

  表示将要出现但一旦出现的屏幕（仍然是屏幕

  B

  ）。将其映射到

  0

  我们的意思是，屏幕

  B

  一旦出现，就应该位于

  X=0

• index+1

  表示屏幕一旦消失。这就是它导致我出错的原因。起初，我以为这是一个静止的屏幕

  B

  ，但就在这时，它会因为像

  B->C

  这样的导航而消失。然而，从我们

  A->B

  的角度来看，屏幕

  A

  将要消失！所以这两种思路都是正确的，都是从不同的角度看问题。因此，将

  index+1

  映射到

  0

  我们是说，当屏幕

  A

  将消失时（即

  B

  将出现时），它应该保持在

  X=0

结果
这是上面代码实现的动画。如您所见，由于关联

索引+1 0

（没有翻译，因此屏幕

A

没有动画），因此屏幕

A

仍保持原样
如果我们将

index+1

的关联更改为

index+1-initWidth

，那么屏幕

A

也将被翻译，并因此设置动画：）

---

---

非常感谢。终于找到了我需要的东西。嘿@toioski，你知道如何在

“react navigation stack”：“2.0.14”，

中做同样的事情吗？自从更新后，界面已经改变了，我不知道如何做与您相同的事情did@VladyslavZavalykhatko嗨，你把它移植到导航v5了吗？@Oleksii是的，但是很久以前，sorry@VladyslavZavalykhatko找到它，需要更努力地搜索：\

const { index } = scene

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

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