代码之家 › 专栏 › 技术社区 › J. Hesters

TypeScript和React Native:RN样式的类型定义是否错误?

typescript-types typescript-typings react-native typescript

J. Hesters · 技术社区 · 7 年前

我想在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>'.

这是怎么回事?反应类型是否错误?还是我应该为RN样式键入这些数组?

1 回复 | 直到 7 年前

Mohsen 7 年前

您可以测试一些解决问题的方法,希望能奏效:

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

Bruno Lemos 7 年前

自从你创建了 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>;

推荐文章

Kareem Adel · 创建函数类型(TypeScript接口)

4 年前

Marcin Sieradzki · 类型按钮中的属性“fit”不能分配给基类型“IButton”中的同一属性。类型“string”不能分配给类型“Fit”

4 年前

tmokmss · TypeScript中记录<K,T>和{[键:K]:T}之间有什么区别?

4 年前

Angulandy2 · Angular 5 viewchild仅工作一次

8 年前

Michael Wilson · 自定义模块模式的TypeScript类型定义

8 年前

donzul · 如何键入接收动态参数并执行递归的函数

8 年前

Milad Rezazadeh · npm包的可安装typescript类型定义

8 年前

ranjit redekar · 如何将js文件从Angular assets文件夹加载到特定的Angular(2,4,5)组件或模块?

8 年前

Ruben · 具有变量键的嵌套TypeScript对象

8 年前

Tom Hudson · TypeScript:从装饰器推断返回类型?

8 年前