RN - typescript 样式作为道具

Question

我正在逐渐将 RN 项目转移到 Typescript。我有一个关于声明作为 props 传递给组件的样式类型的问题。

组件内的Props定义如下：

interface Props {
  children: ReactNode;
  style?: ViewStyle;
}

如果我只传递一个简单的样式对象就可以了，例如：

<Component style={{ marginTop: 1 }}>...children...</Component>
<Component style={styleObj}>....children...</Component>

但是如果我传递一组样式，它就会失败：

<Component style={[styleObj, { marginTop: someVar }]}>...children...</Component>

指定样式道具类型的最佳方法是什么？

编辑：TS 消息是：

TS2559: Type '({ flex: number; } | { marginTop: number; })[]' has no properties in common with type 'ViewStyle'.  Component.tsx(12, 3): The expected type comes from property 'style' which is declared here on type 'IntrinsicAttributes & Props'

Answer 1

如果您可以控制

style

propType，请将其更改为：

interface Props {
  children: ReactNode;
  style?: StyleProp<ViewStyle>;
}

进一步讨论

有时，当我发现自己重复使用基础组件的 props 时，我喜欢用基础组件的 props 类型来扩展 prop 类型，以避免自己必须弄清楚我需要什么类型的麻烦。

示例

这不是最详尽的示例，但它应该演示此模式的主要目的。我希望你发现这个有用。

我有一个名为

CustomView

的自定义组件，其核心只是一个

react-native

View

组件。然后我可以用

CustomView

的 prop 类型扩展

View

的 prop 类型。

interface Props extends React.ComponentProps<typeof View> {
   customPropsOne: string;
   // also contains all props of the View component
}

const CustomView = (props: Props) => {
   // make use of the ...rest operator to extract the extended View props
   const {customPropsOne, ...rest} = props;

   return(
      <View {...rest}>
         <Text>
            {customPropsOne}
         </Text>
      </View>
   )
}

// example component usage

<CustomView
   style={[myStyles, anotherStyle]}
   accessibilityLabel={"main view"}>
   {children}
</CustomView>

Answer 2

您不一定需要使用

ViewStyle

，因为您可以使用

React.CSSProperties

在

React 和 TypeScript 中接受

React.CSSProperties类型的 prop 传递：

import React from "react"

interface MyComponentProps {
  style: React.CSSProperties;
}