TypeScript 和 React Native：RN 样式的类型定义是不是错误？

Posted 2023-03-13

【中文标题】TypeScript 和 React Native：RN 样式的类型定义是不是错误？

【英文标题】：TypeScript and React Native: Are the type definitions for RN styles wrong?TypeScript 和 React Native：RN 样式的类型定义是否错误？

【发布时间】：2019-05-07 10:02:54

【问题描述】：

我认为在 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 样式？

【问题讨论】：

您应该可以使用样式数组。 Types of property 'pop' are incompatible 中提到的 pop 属性是什么？

【参考方案1】：

由于您创建了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>;

【讨论】：

我们不直接应用样式，除非我们希望我们的应用程序变慢。我们总是将样式定义为组件之外的对象或使用这些对象的记忆函数。这种方式样式对象只创建一次，而不是在每次渲染时创建。

【参考方案2】：

你可以测试一些方法来解决你的问题，希望这能奏效：

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