typescript - 为什么我不能在自己的组件上使用 StyleProp

Question

我正在使用 TypeScript/Vscode 来编写我的 React Native 应用程序。我希望我的自定义组件上的代码完成就像 React Native 自己的风格一样 View组件。
style Prop View定义如下:

style?: StyleProp<ViewStyle>;

当我在我自己的组件的 props 上尝试它时:

type MyViewProps = { style?:StyleProp<ViewStyle> }
class MyView extends Component<MyViewProps>{ ... }

并尝试以我使用 style 的方式使用它在常规 View 中:

<MyView style={{top:-20}}/>

我收到以下错误:

Type '{ style: { top: number; }; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<Pick<MyViewProps, never>, any, any>> & Readonly<Pick<MyViewProps, never>> & Readonly<...>'.
  Property 'style' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<Pick<MyViewProps, never>, any, any>> & Readonly<Pick<MyViewProps, never>> & Readonly<...>'.ts(2322)

我究竟做错了什么？

(只是为了澄清:该样式在运行时确实可以完美运行，只是我无法开始工作的代码完成/智能感知)

Answer 1

如果您不关心动画 View 。

type MyViewProps = { style?: ViewStyle };

如果你真的关心 Animated.View .

type MaybeAnimated<T> = T | Animated.Value;
type AnimatedScalar = string | number;

type AnimatedStyle<T> = {
  [Key in keyof T]: T[Key] extends AnimatedScalar
    ? MaybeAnimated<T[Key]>
    : T[Key] extends Array<infer U>
    ? Array<AnimatedStyle<U>>
    : AnimatedStyle<T[Key]>;
};

像这样使用它。

type MyViewProps = { style?: AnimatedStyle<ViewStyle> };

去 upvote here too因为它是我找到这个答案的 99% 的地方。 🤠