Почему я не могу использовать StyleProp‹ViewStyle› в своем собственном компоненте

Я использую TypeScript/Vscode для кодирования своего приложения React Native. Я хочу автодополнение кода для своих пользовательских компонентов для стиля, как это делает собственный компонент 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)

Что я делаю не так?

(Просто для пояснения: стиль действительно отлично работает во время выполнения, это просто автозавершение кода/IntelliSense, с которым я не могу работать)


visual-studio-code react-native typescript intellisense typescript3.0
person Can Poyrazoğlu    schedule 01.08.2019    source источник

Ответы (1)


arrow_upward
7
arrow_downward

Если вас не волнуют анимированные представления.

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% этого ответа. ????


person GollyJer    schedule 22.01.2020