如何在Expo Tabs中添加标签页切换的滑动过渡动画？

要给Expo Router的底部标签页添加切换滑动动画，你可以通过配置<Tabs>组件的screenOptions，启用手势并自定义转场动画效果，具体修改如下：

修改(tabs)/_layout.jsx代码：

const TabLayout = () => {
  return (
    <>
      <Tabs
        screenOptions={{
          // 启用左右滑动切换手势
          gestureEnabled: true,
          // 开启标签页切换动画
          animationEnabled: true,
          // 定义动画时长与类型
          transitionSpec: {
            open: {
              animation: 'timing',
              config: { duration: 300 }
            },
            close: {
              animation: 'timing',
              config: { duration: 300 }
            }
          },
          // 自定义滑动动画的样式插值
          cardStyleInterpolator: ({ current, next, layouts }) => ({
            cardStyle: {
              transform: [
                {
                  translateX: current.progress.interpolate({
                    inputRange: [0, 1],
                    outputRange: [layouts.screen.width, 0]
                  })
                },
                {
                  translateX: next
                    ? next.progress.interpolate({
                        inputRange: [0, 1],
                        outputRange: [0, -layouts.screen.width]
                      })
                    : 0
                }
              ]
            }
          })
        }}
      >
        <Tabs.Screen name="index" />
        <Tabs.Screen name="settings" />
      </Tabs>
    </>
  );
};

export default TabLayout;

关键配置说明： #

• gestureEnabled: true：允许用户通过左右滑动手势切换标签页
• animationEnabled: true：开启标签页切换时的动画效果
• transitionSpec：设置动画的时长（这里是300ms）和动画类型（线性计时动画）
• cardStyleInterpolator：通过插值计算实现页面左右滑动的视觉效果，切换时当前页面从右侧滑出，目标页面从左侧滑入

修改后，点击底部标签或滑动页面都会触发平滑的滑动切换动画。

内容的提问来源于stack exchange，提问作者Samych02