使用 Typescript 反应原生数组表示法答案

【问题标题】：React Native Array Notation with Typescript使用 Typescript 反应原生数组表示法
【发布时间】：2020-07-02 20:12:51
【问题描述】：

我有一个对象，我试图将样式传递给它。用普通的JS我可以通过

<ObjectName       
  containerStyle={[
    {marginTop: 10, marginBottom: 30},
    {borderBottomWidth: 3},
     keyboardOpen ? null : {marginHorizontal: 30},
  ]} />

但是，当我尝试在 Typescript 中做同样的事情时，我得到一个错误，即给定的对象没有与 FlexStyle 相同的属性，Object 的定义如下

export const ObjectName = (props: {containerStyle?: FlexStyle}) => {...}

如何将这些样式与 TS 中的数组表示法结合起来，或者如果我不能使用什么是最好的方法？

【问题讨论】：

不知道你的 FlexStyle 类型/接口需要什么，如果你想传递一个数组，也许你需要props: {containerStyle?: FlexStyle[]}？
FlexStyle 直接来自 React-native import { FlexStyle } from 'react-native'; 此外，它不是数组，它的数组表示法。只是关于数组表示法的 JS 方面的许多 SO 问题之一。 stackoverflow.com/questions/40117640/…

标签： typescript react-native

【解决方案1】：

如果您传递一个数组，常规的style 属性会将多个对象组合为一个。我相信您可以使用类似于以下示例的代码来模拟这种行为：

const ObjectName = (props: {containerStyle?: FlexStyle | Array<FlexStyle> }) => {
    let containerStyle;
    if(Array.isArray(props.containerStyle)) {
        containerStyle = Object.assign({}, ...props.containerStyle) as FlexStyle 
    }
    else {
    containerStyle = props.containerStyle
    }
    return <View style={containerStyle}/>
}

不确定这对你来说是否是绝对必要的条件，但如果你希望能够传递样式对象或对象数组，Typescript 应该能够消化它。

【讨论】：