为什么CardStyleInterpolators在Android端转场动画运行不流畅

现象说明 #

转场动画在iOS系统上运行十分流畅，但在Android设备上点击返回按键时会出现卡顿问题，卡顿现象如下：

初始实现代码如下：

import {
  createStackNavigator,
  CardStyleInterpolators,
} from "@react-navigation/stack";

const Stack = createStackNavigator();

<Stack.Navigator
    initialRouteName={"Lorem"}
    screenOptions={{
      cardStyleInterpolator: CardStyleInterpolators.forFadeFromBottomAndroid,
    }}
  >

卡顿根因 #

• 使用的CardStyleInterpolators.forFadeFromBottomAndroid插值器适配的是安卓低版本过渡逻辑，和安卓10及以上系统自带的返回手势动画调度规则冲突，导致动画时序错乱掉帧
• JS堆栈的转场动画完全依赖JS线程调度，返回触发时如果JS线程有其他计算任务，就会出现卡顿

修复方案 #

方案1：调整JS堆栈动画配置（改动最小） #

统一进出动画规则，禁用冲突的安卓手势，代码修改如下：

import {
  createStackNavigator,
  CardStyleInterpolators,
  TransitionSpecs,
} from "@react-navigation/stack";
import { Platform } from 'react-native';

const Stack = createStackNavigator();

<Stack.Navigator
    initialRouteName={"Lorem"}
    screenOptions={{
      cardStyleInterpolator: CardStyleInterpolators.forFadeFromCenter,
      // 统一安卓进出动画的时长与时序，避免和系统默认规则冲突
      transitionSpec: {
        open: TransitionSpecs.FadeTransitionSpec,
        close: TransitionSpecs.FadeTransitionSpec,
      },
      // 安卓端禁用默认返回手势，避免和自定义动画冲突
      gestureEnabled: Platform.OS !== 'android',
    }}
  >

方案2：切换为原生堆栈（性能最优） #

原生堆栈的转场动画完全在原生UI线程执行，不会受JS线程阻塞影响，性能提升明显，修改如下：

1. 先安装依赖：
   npm install @react-navigation/native-stack
2. 替换堆栈实现代码：

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

const Stack = createNativeStackNavigator();

<Stack.Navigator
  initialRouteName="Lorem"
  screenOptions={{
    // 原生堆栈直接配置底部淡入动画，效果和原需求一致
    animation: 'fade_from_bottom',
  }}
>

额外优化建议 #

• 页面转场过程中不要执行大量状态更新、复杂计算等耗时JS逻辑，可等待转场完成后再执行
• 开启安卓端Hermes引擎，降低JS线程执行卡顿概率

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