reactjs - 不确定我的 Prop 在 React Native TypeScript 中是什么类型

Question

我正在尝试在我的项目中实现 typescript ，但在为我的滑动 Prop 提供 Prop 类型时遇到了问题。它们都是正确的类型，但是当给出这种类型时，我在第 72 行收到错误:

style={[styles.container, isFirst && animatedCardStyle]}

错误提示:类型'假 | { transform: ({ [key: string]: Value; } | { rotate: AnimatedInterpolation; })[]; }' 不可分配给类型 'false |值(value) |动画插值 |注册样式 |带动画对象 | WithAnimatedArray<...> |只读(假 | ... 5 更多 ... | 未定义)[] |空 |不明确的'。输入'{ transform: ({ [key: string]: Animated.Value; } | { rotate: Animated.AnimatedInterpolation; })[]; }' 不可分配给类型 'false |值(value) |动画插值 |注册样式 |带动画对象 | WithAnimatedArray<...> |只读(假 | ... 5 更多 ... | 未定义)[] |空 |不明确的'。输入'{ transform: ({ [key: string]: Animated.Value; } | { rotate: Animated.AnimatedInterpolation; })[]; }' 不可分配给类型 'WithAnimatedObject'。 “transform.pop()”返回的类型在这些类型之间不兼容。输入'{ [键:字符串]:值； } | { 旋转:动画插值； } | undefined' 不可分配给类型 'WithAnimatedObject |带动画对象 |带动画对象 | ... 10 更多... |不明确的'。输入'{ [键:字符串]:值； }' 不可分配给类型 'WithAnimatedObject |带动画对象 |带动画对象 | ... 10 更多... |不明确的'。类型 '{ [key: string]: Value; 中缺少属性 'matrix' }' 但在类型 'WithAnimatedObject' 中是必需的。 index.d.ts(818, 5):此处声明“矩阵”。

我真的很困惑这意味着什么，虽然我的应用程序运行和工作我不知道错误，但我也可以使用任何类型并且它也清除了这个问题。任何帮助都会很棒!

import React, {useCallback} from 'react';
    import {LinearGradient} from 'expo-linear-gradient';
    import {Animated, Image, ImageSourcePropType, Text} from 'react-native';
    import Choice from '../Choice';
    import {ACTION_OFFSET} from '../Utils/constants';
    
    import {styles} from './styles';
    
    type Props = {
        name: string,
        source: ImageSourcePropType,
        isFirst: boolean,
        swipe: Animated.AnimatedValueXY,
        tiltSign: Animated.AnimatedValue,
    };
    const Card = ({
                      name,
                      source,
                      isFirst,
                      swipe,
                      tiltSign,
                      ...rest
                  }: Props) => {
        const rotate = Animated.multiply(swipe.x, tiltSign).interpolate({
            inputRange: [-ACTION_OFFSET, 0, ACTION_OFFSET],
            outputRange: ['8deg', '0deg', '-8deg'],
        });
    
        const likeOpacity = swipe.x.interpolate({
            inputRange: [25, ACTION_OFFSET],
            outputRange: [0, 1],
            extrapolate: 'clamp',
        });
    
        const nopeOpacity = swipe.x.interpolate({
            inputRange: [-ACTION_OFFSET, -25],
            outputRange: [1, 0],
            extrapolate: 'clamp',
        });
    
        const animatedCardStyle = {
            transform: [...swipe.getTranslateTransform(), {rotate}],
        };
    
        const renderChoice = useCallback(() => {
            return (
                <>
                    <Animated.View
                        style={[
                            styles.choiceContainer,
                            styles.likeContainer,
                            {opacity: likeOpacity},
                        ]}
                    >
                        <Choice type="like"/>
                    </Animated.View>
                    <Animated.View
                        style={[
                            styles.choiceContainer,
                            styles.nopeContainer,
                            {opacity: nopeOpacity},
                        ]}
                    >
                        <Choice type="nope"/>
                    </Animated.View>
                </>
            );
        }, [likeOpacity, nopeOpacity]);
    
        return (
            <Animated.View
                style={[styles.container, isFirst && animatedCardStyle]}
                {...rest}
            >
                <Image source={source} style={styles.image}/>
                <LinearGradient
                    colors={['transparent', 'rgba(0,0,0,0.9)']}
                    style={styles.gradient}
                />
                <Text style={styles.name}>{name}</Text>
    
                {isFirst && renderChoice()}
            </Animated.View>
        );
    }
    
    export default Card;

Answer 1

我发现修复它的最佳方法是为 animatedCardStyle 提供一种 Animated.Animated 类型，这样可以清除错误。

import React, {useCallback} from 'react';
import {LinearGradient} from 'expo-linear-gradient';
import {Animated, Image, ImageSourcePropType, Text} from 'react-native';
import Choice from '../Choice';
import {ACTION_OFFSET} from '../Utils/constants';

import {styles} from './styles';

type Props = {
    name: string,
    source: ImageSourcePropType,
    isFirst: boolean,
    swipe: Animated.ValueXY,
    tiltSign: Animated.Value,
};
const Card = ({
                  name,
                  source,
                  isFirst,
                  swipe,
                  tiltSign,
                  ...rest
              }: Props) => {
    const rotate = Animated.multiply(swipe.x, tiltSign).interpolate({
        inputRange: [-ACTION_OFFSET, 0, ACTION_OFFSET],
        outputRange: ['8deg', '0deg', '-8deg'],
    });

    const likeOpacity = swipe.x.interpolate({
        inputRange: [25, ACTION_OFFSET],
        outputRange: [0, 1],
        extrapolate: 'clamp',
    });

    const nopeOpacity = swipe.x.interpolate({
        inputRange: [-ACTION_OFFSET, -25],
        outputRange: [1, 0],
        extrapolate: 'clamp',
    });

    const animatedCardStyle: Animated.Animated = {
        transform: [...swipe.getTranslateTransform(), {rotate}],
    };

    const renderChoice = useCallback(() => {
        return (
            <>
                <Animated.View
                    style={[
                        styles.choiceContainer,
                        styles.likeContainer,
                        {opacity: likeOpacity},
                    ]}
                >
                    <Choice type="like"/>
                </Animated.View>
                <Animated.View
                    style={[
                        styles.choiceContainer,
                        styles.nopeContainer,
                        {opacity: nopeOpacity},
                    ]}
                >
                    <Choice type="nope"/>
                </Animated.View>
            </>
        );
    }, [likeOpacity, nopeOpacity]);

    return (
        <Animated.View
            style={[styles.container, isFirst && animatedCardStyle]}
            {...rest}
        >
            <Image source={source} style={styles.image}/>
            <LinearGradient
                colors={['transparent', 'rgba(0,0,0,0.9)']}
                style={styles.gradient}
            />
            <Text style={styles.name}>{name}</Text>

            {isFirst && renderChoice()}
        </Animated.View>
    );
}

export default Card;