TypeScript и React Native: неверны ли определения типов для стилей RN? - PullRequest
Новая
       42

TypeScript и React Native: неверны ли определения типов для стилей RN?

0 голосов
/ 05 декабря 2018

Я думал, что в React разрешено присваивать массивы стилям?

Примерно так: 

import React from 'react';
import { Text } from "react-native";

// ...

render() {
  const textStyles = [styles.text];
  return <Text style={textStyles}>Some Text</Text>;
}

Но TSLint жалуется на эту строку с помощью: 

[ts]
Type 'RegisteredStyle<{ color: string; fontWeight: string; fontSize?: undefined; padding: number; textAlign: "center"; } | { color: string; fontSize: number; fontWeight?: undefined; padding: number; textAlign: "center"; }>[]' is not assignable to type 'StyleProp<TextStyle>'.
  Type 'RegisteredStyle<{ color: string; fontWeight: string; fontSize?: undefined; padding: number; textAlign: "center"; } | { color: string; fontSize: number; fontWeight?: undefined; padding: number; textAlign: "center"; }>[]' is not assignable to type 'RecursiveArray<false | TextStyle | RegisteredStyle<TextStyle> | null | undefined>'.
Types of property 'pop' are incompatible.
  Type '() => RegisteredStyle<{ color: string; fontWeight: string; fontSize?: undefined; padding: number; textAlign: "center"; } | { color: string; fontSize: number; fontWeight?: undefined; padding: number; textAlign: "center"; }> | undefined' is not assignable to type '() => StyleProp<TextStyle>'.
    Type 'RegisteredStyle<{ color: string; fontWeight: string; fontSize?: undefined; padding: number; textAlign: "center"; } | { color: string; fontSize: number; fontWeight?: undefined; padding: number; textAlign: "center"; }> | undefined' is not assignable to type 'StyleProp<TextStyle>'.
      Type 'RegisteredStyle<{ color: string; fontWeight: string; fontSize?: undefined; padding: number; textAlign: "center"; } | { color: string; fontSize: number; fontWeight?: undefined; padding: number; textAlign: "center"; }> | undefined' is not assignable to type 'StyleProp<TextStyle>'.
      Type 'RegisteredStyle<{ color: string; fontWeight: string; fontSize?: undefined; padding: number; textAlign: "center"; } | { color: string; fontSize: number; fontWeight?: undefined; padding: number; textAlign: "center"; }>' is not assignable to type 'StyleProp<TextStyle>'.

Что здесь происходит?Являются ли типы React Native неправильными?Или я как-то должен типизировать эти массивы для стилей RN?

Ответы [ 2 ]

0 голосов
/ 24 апреля 2019

Поскольку вы создали переменную textStyles, вам необходимо добавить к ней тип: 

const textStyles: StyleProp<TextStyle> = [styles.a, styles.b];
return <Text style={textStyles}>Some Text</Text>;

Но обычно вы просто применяете стиль напрямую: 

return <Text style={[styles.a, styles.b]}>Some Text</Text>;
0 голосов
/ 06 декабря 2018

Вы можете протестировать некоторые способы решения вашей проблемы, надеюсь, эта работа:

1 : style={styles.yourStyle as any} возможно, вам следует сделать трюк!

2 : Я не вижу, как вы реализуете свои стили, но вы можете протестировать что-то вроде этого? 

import { StyleSheet, TextStyle, ViewStyle } from "react-native";

type Style = {
    container: ViewStyle;
    title: TextStyle;
    icon: ImageStyle;
};

export default StyleSheet.create<Style>({
    container: {
        flex: 1
    },
    title: {
        color: red
    },
    icon: {
        width: 10,
        height: 10
    }
});
...