能否为React Native导航按钮添加动画以优化页面跳转过渡效果？

解决方案 #

跳转过渡生硬的核心原因是Drawer导航默认未启用栈导航的页面切换过渡动画，不需要使用Transitioner即可实现自定义动画，适配函数式组件场景，有两种常用实现方式：

1. 全局配置Drawer导航动画 #

直接在定义Drawer导航的位置统一配置所有页面的切换动画，所有页面跳转都会生效，适配任意组件类型的页面。
以React Navigation 6.x版本为例，配置代码如下：

import { createDrawerNavigator } from '@react-navigation/drawer';
import { SlideFromRightIOS } from '@react-navigation/stack/lib/typescript/src/TransitionConfigs/CardStyleInterpolators';
import { TransitionSpecs } from '@react-navigation/stack';

const Drawer = createDrawerNavigator();

function RootNavigator() {
  return (
    <Drawer.Navigator
      screenOptions={{
        // 定义动画的时长、运动曲线
        transitionSpec: {
          open: TransitionSpecs.TransitionIOSSpec,
          close: TransitionSpecs.TransitionIOSSpec,
        },
        // 定义页面滑入动画，此处示例为iOS风格从右侧滑入，可替换为FadeFromBottomAndroid等其他预设动画
        cardStyleInterpolator: SlideFromRightIOS,
        drawerStyle: {
          width: 240,
        },
      }}
    >
      <Drawer.Screen name="Home" component={HomeScreen} />
      <Drawer.Screen name="SocialScreen" component={SocialScreen} />
      {/* 其他抽屉页面 */}
    </Drawer.Navigator>
  );
}

配置完成后你现有的按钮跳转代码不需要做任何修改，就会自动带过渡动画。

2. 单次跳转指定自定义动画 #

如果不需要全局修改所有页面的跳转动画，只想给当前自定义按钮的跳转加动画，可以通过路由参数动态控制动画效果：
首先修改Drawer导航的screenOptions配置，读取路由参数中的动画配置：

<Drawer.Navigator
  screenOptions={({ route }) => ({
    transitionSpec: {
      open: TransitionSpecs.TransitionIOSSpec,
      close: TransitionSpecs.TransitionIOSSpec,
    },
    cardStyleInterpolator: route.params?.animationType === 'slide' 
      ? SlideFromRightIOS 
      : FadeFromBottomAndroid,
  })}
>
  {/* 页面注册 */}
</Drawer.Navigator>

然后修改你的按钮跳转代码，传入对应的动画参数即可：
如果是类组件，直接修改onPress逻辑：

<TouchableOpacity
   style={styles.buttonContainer}
   onPress={() => this.props.navigation.navigate("SocialScreen", { animationType: 'slide' })}>
   <Text style={styles.buttonText}>Socials</Text>
</TouchableOpacity>

如果是函数式组件，可以直接用useNavigation钩子获取导航实例：

import { useNavigation } from '@react-navigation/native';

function CustomButtonComponent() {
  const navigation = useNavigation();
  return (
    <TouchableOpacity
      style={styles.buttonContainer}
      onPress={() => navigation.navigate("SocialScreen", { animationType: 'slide' })}>
      <Text style={styles.buttonText}>Socials</Text>
    </TouchableOpacity>
  )
}

备选方案 #

如果你需要和标准栈导航完全一致的跳转体验，可以将Drawer导航嵌套在Stack导航中，页面跳转统一使用Stack导航的navigate方法，天生自带过渡动画，Drawer仅作为侧边栏入口使用，这种方案兼容性最强，适配所有React Navigation版本。

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