为什么我不能使用styleprop< viewStyle>在我自己的组件上

Question

我正在使用Typescript/VScode来编码我的React本机应用程序。我希望在我的自定义组件上完成代码的样式，就像React Native自己的View组件一样。

style prop View是这样定义的：

style?: StyleProp<ViewStyle>;

当我以自己的组件的道具进行尝试时：

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

并尝试按照我在常规视图上使用style的方式使用它：

<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)

我在做什么错？

(只是为了澄清：样式 di di di d dis 在运行时完美工作，我无法工作的代码完成/IntelliSense(

Answer 1

如果您不关心动画视图。

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> };

也在这里倾斜，因为我发现了这个答案的99％。🤠