如何修复React Native自定义StackNavigator动画时transitionSpec类型错误

在使用@react-navigation/Stack的StackNavigator实现页面导航自定义动画时，配置transitionSpec的open和close属性后出现TypeScript类型校验报错，但应用在模拟器中运行无异常。

相关代码 #

import { Easing, StyleSheet, Text, View } from "react-native";

import Home from "./screens/Home";
import Details from "./screens/Details";

import {
  createStackNavigator,
  CardStyleInterpolators,
} from "@react-navigation/stack";
import { NavigationContainer } from "@react-navigation/native";
export type RootStackParamList = {
  Home: undefined; // No parameters expected for Home screen
  Details: undefined;
};

const Config = {
  animation: "spring",
  config: {
    stiffness: 1000,
    damping: 50,
    mass: 3,
    overshootClamping: false,
    restDisplacementThreshold: 0.01,
    restSpeedThreshold: 0.01,
  },
};
const closeConfig = {
  animation: "timing",
  config: {
    duration: 200,
    easing: Easing.linear,
  },
};

const Stack = createStackNavigator<RootStackParamList>();
export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator
        screenOptions={{
          gestureDirection: "horizontal",
          transitionSpec: {
            open: Config,
            close: closeConfig,
          },
          cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
        }}
      >
        <Stack.Screen name="Home" component={Home} />
        <Stack.Screen name="Details" component={Details} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});

错误原因 #

TypeScript默认会将"spring"、"timing"推断为宽泛的string类型，而@react-navigation/stack的transitionSpec要求animation属性必须是"spring" | "timing" | "none"这些特定的字面量类型，因此出现类型不匹配的校验报错。

解决方法 #

方法一：使用as const断言约束字面量类型

修改Config和closeConfig的定义，通过as const让TypeScript保留字符串的字面量类型：

const Config = {
  animation: "spring" as const,
  config: {
    stiffness: 1000,
    damping: 50,
    mass: 3,
    overshootClamping: false,
    restDisplacementThreshold: 0.01,
    restSpeedThreshold: 0.01,
  },
};
const closeConfig = {
  animation: "timing" as const,
  config: {
    duration: 200,
    easing: Easing.linear,
  },
};

方法二：导入TransitionSpec类型并标注

从@react-navigation/stack导入官方定义的TransitionSpec类型，直接为配置对象标注类型：

import {
  createStackNavigator,
  CardStyleInterpolators,
  TransitionSpec, // 导入类型
} from "@react-navigation/stack";

// 标注类型
const Config: TransitionSpec = {
  animation: "spring",
  config: {
    stiffness: 1000,
    damping: 50,
    mass: 3,
    overshootClamping: false,
    restDisplacementThreshold: 0.01,
    restSpeedThreshold: 0.01,
  },
};
const closeConfig: TransitionSpec = {
  animation: "timing",
  config: {
    duration: 200,
    easing: Easing.linear,
  },
};

两种方法都能让TypeScript通过类型校验，且不影响动画的实际运行效果。

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