cardStyleInterpolator 道具的类型

Question

我在我的导航堆栈中使用它：  <NavigationStack.Screen                    name="UserMenu"                    component={UserMenu}                    options={{                      headerShown: false,                      cardStyleInterpolator: forSlideFromLeft,                    }}                  />const forSlideFromLeft = (props) => {  const { current, layouts } = props;  console.log('PROPS FROM USER MENU', current)  console.log('PROPS FROM USER MENU2', layouts)  const translateX = current.progress.interpolate({    inputRange: [0, 1],    outputRange: [-layouts.screen.width, 0],  });  if (props.index === 2) {    return {      cardStyle: {        transform: [{ translateX }],      },    };  } else {    return {};  }};但我得到一个错误，props它Parameter 'props' implicitly has an 'any' type.可能是什么类型。如果我infer from usage在 VS Code 中，我会得到这个：(props: { index?: any; current?: any; layouts?: any; })但我不想使用any类型。如果我在控制台上打印current和值，我会得到如下信息：layout当前的：{progress: AnimatedInterpolation}progress: AnimatedInterpolation {_listeners: {…}, _children: Array(0), _parent: AnimatedValue, _config: {…}, _interpolation: ƒ, …}__proto__: Object布局：{screen: {…}}screen: {width: 411.4285583496094, height: 707.4285888671875}__proto__: Object我怎样才能解决这个问题？什么是适合在这里使用的类型？

Answer 1

您可以StackCardInterpolationProps从导入类型react-navigation

https://github.com/react-navigation/react-navigation/blob/main/packages/stack/src/types.tsx

Answer 2

在 React 导航 6 中

查看in的类型定义StackCardStyleInterpolator@react-navigation。这应该适用于 Stack 中的动画屏幕。

forSlideFromLeft您可以像这样实现您的方法：

import {

  StackCardInterpolationProps,

  StackCardInterpolatedStyle,

} from "@react-navigation/stack";

const forSlideFromLeft = (

 { current, layouts, index }: StackCardInterpolationProps

): StackCardInterpolatedStyle => {

  const translateX = current.progress.interpolate({

    inputRange: [0, 1],

    outputRange: [-layouts.screen.width, 0],

  });

  if (index === 2) {

    return {

      cardStyle: {

        transform: [{ translateX }],

      },

    };

  } else {

    return {};

  }

};

还有一个StackHeaderStyleInterpolator用于动画标题的。