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-navigationhttps://github.com/react-navigation/react-navigation/blob/main/packages/stack/src/types.tsx

Answer 2

在 React 导航 6 中查看in的类型定义StackCardStyleInterpolator@react-navigation。这应该适用于 Stack 中的动画屏幕。forSlideFromLeft您可以像这样实现您的方法：import {&nbsp; StackCardInterpolationProps,&nbsp; StackCardInterpolatedStyle,} from "@react-navigation/stack";const forSlideFromLeft = (&nbsp;{ current, layouts, index }: StackCardInterpolationProps): StackCardInterpolatedStyle => {&nbsp; const translateX = current.progress.interpolate({&nbsp; &nbsp; inputRange: [0, 1],&nbsp; &nbsp; outputRange: [-layouts.screen.width, 0],&nbsp; });&nbsp; if (index === 2) {&nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; cardStyle: {&nbsp; &nbsp; &nbsp; &nbsp; transform: [{ translateX }],&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; };&nbsp; } else {&nbsp; &nbsp; return {};&nbsp; }};还有一个StackHeaderStyleInterpolator用于动画标题的。