在React Native中，视图元素接受style属性，该属性在驼峰式对象中使用CSS属性名称：

const styleObj = {
  width: 200,
  marginTop: 10
}

元素还接受样式对象数组，如下所示：

<MyComponent style={[ styleObj, styleProp && styleProp ]} />

我有几个抽象的按钮组件，它们依赖于一个共享的基本按钮接口。

interface IButton {
  style?: ViewStyle | ViewStyle[] // <-- ViewStyle is exported by react native, and contains all the allowed style properties for a View component
}

我原以为这个定义已经足够了，但我遇到了一些我难以理解的问题。
我有一个渲染Button的DropDown组件。当我使用样式属性时，我得到一个错误：

<Button
  style={[
    {
      backgroundColor: backgroundColor || COLORS.lightRed,
      borderRadius: 3,
      height: 44,
      width: '100%',
     },
     style && style, // <-- type is ViewStyle | ViewStyle[], this is passed in as a prop
  ]}

上面的代码抛出错误：

Type (ViewStyle | ViewStyle[] | undefined)[] is not assignable to ViewStyle | ViewStyle[] | undefined

如果我铸造风格：style && (style as ViewStyle)我得到一个不同的错误：

Type (ViewStyle | undefined)[] is not assignable to ViewStyle[]

如果我将整个数组转换为ViewStyle，则错误将清除：

<Button
  style={[
    {
      backgroundColor: backgroundColor || COLORS.lightRed,
      borderRadius: 3,
      height: 44,
      width: '100%',
     },
     style && style,
  ] as ViewStyle}

这很好，但我有点困惑。我有一种预感，因为我的组件使用相同的props接口，TypeScript会变得困惑。最终我不确定为什么会发生这些错误，以及我的定义中有什么不正确的地方需要依赖强制转换。