在 React Bottom Tab Navigator 上的选项卡之间切换时如何添加幻灯片过渡？

Question

我正在使用带有底部选项卡的 React Native 在本机堆栈选项卡屏幕之间进行切换。在大多数情况下，这是可以的，但选项卡开关有点刺耳，有时对于更复杂的屏幕来说会有点滞后。

当我单击不同的选项卡时，如何引入某种形式的过渡，以免显得不和谐？

我知道如何使用 createBottomTabNavigator 对 React Navigation 过渡进行动画处理？但这是通过淡入淡出动画完成的。我正在寻找的具体是一个幻灯片过渡，每个屏幕都是本机堆栈导航器。

Answer 1

尝试用包裹屏幕<Animated.View>

以及动画滑动的样式变换

例如：

<Animated.View // Special animatable View
  style={{
    flex: 1,
    opacity: fadeAnim,

    transform: [{
      translateX: fadeAnim.interpolate({
        inputRange:[0,1],
        outputRange: [SCREEN_WIDTH,1],
        extrapolate:'clamp'
      })
    }],
    // Bind opacity to animated value
  }}>
  {props.children}
</Animated.View>

您可以从 Dimension 获取屏幕宽度

const SCREEN_WIDTH = Dimensions.get('window').width

或者您可以使用尺寸高度自定义垂直滑动