如何在 propTypes 中声明样式？答案

【问题标题】：How to declare style in propTypes?如何在 propTypes 中声明样式？
【发布时间】：2016-04-10 03:22:08
【问题描述】：

启用forbid-prop-types 规则后，eslint 禁止我使用style: React.PropTypes.object，建议使用shape。

但是真的有必要像这样为此目的定义所有可用的属性吗？

DEMO.propTypes = {
    style: React.PropTypes.shape({
        color: React.PropTypes.string,
        fontSize: React.PropTypes.number,
        ...
    })
};

定义代码太多！

【问题讨论】：

未来的读者，让我为你节省一些时间，看@David Weldon的答案

标签： react-native eslint

【解决方案1】：

React Native 现在包含 ViewPropTypes，它将替换 View.propTypes.style。用法示例：

import { ViewPropTypes } from 'react-native';

MyComponent.propTypes = {
  style: ViewPropTypes.style
};

【讨论】：

你见过 Text 的等价物吗？ TextPropTypes 在 React Native 代码库中似乎不存在 View.propTypes 在发布模式下运行时不再存在，但我不确定 Text.propTypes 是否存在。
@BenClayton 我没有。 ViewPropTypes 的 RN 文档也不可用。
不推荐使用 react-native-web github.com/necolas/react-native-web/releases/tag/0.12.0

【解决方案2】：

View.propTypes.style

或

Text.propTypes.style

看起来像这样：

DEMO.propTypes = {
    style: Text.propTypes.style,
    ...
};

https://facebook.github.io/react-native/releases/0.21/docs/style.html#pass-styles-around

【讨论】：

问题标记为reactjs，仅此react-native吗？
这只是react-native，但绝对是react-native 的最佳答案:)
现在已弃用
小心！ View.propTypes 将在发布版本中被删除，因此您将遇到错误：style of undefined!! （Text 也一样）
此解决方案已过时。试试@NiFi 的答案。这对我有用

【解决方案3】：

一种可能性是像这样使用react-style-proptype 包：

import stylePropType from 'react-style-proptype';

MyComponent.propTypes = {
  style: stylePropType,
};

【讨论】：

不幸的是，这个包使用一些 RN 样式设置（如 paddingHorizontal）引发警告。

【解决方案4】：

使用下面的简单代码。

PropTypes.oneOfType([PropTypes.object, PropTypes.array])

因此，您可以将代码应用于此。

DEMO.propTypes = {
    style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
};

在 RN 中测试 > 0.57。

【讨论】：

【解决方案5】：

使用ViewPropTypes.style。 View.propTypes 已弃用

【讨论】：

ViewPropTypes 不再在文档中。我认为已弃用。
那么还有其他选择吗？编辑：看起来现在支持ViewStyle

【解决方案6】：

又快又脏/Hack-ish

扩展@jalal246 答案：

PropTypes.objectOf(PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.number,
]))

这可用于 web 样式（请参阅 React-native 的其他答案），而无需使用其他包。

【讨论】：

这允许对象中的非样式键。
是的，这又快又脏。

【解决方案7】：

有两种可能。我更喜欢的第一个是使用 react 中的 ViewPropTypes。另一个使用 PropTypes 是：

Component.propTypes = {
    textStyles: PropTypes.oneOfType([
        PropTypes.object,
        PropTypes.number
    ])
}

您可能会问“如果样式只是一个对象，为什么要使用 PropTypes.number？”答案是 react native 团队做了一点优化，缓存了样式表，简单的发送缓存的 ID。

【讨论】：

【解决方案8】：

我通常使用PropTypes.objectOf(PropTypes.string) 不需要定义所有的css样式。

【讨论】：

这允许对象中的非样式键。
这也不允许你使用，例如，left: 0 作为一个数字，而是需要留下：'0px'

【解决方案9】：

JSDoc 有一个简单的方法。

/**
   * @typedef Props
   * @prop {React.CSSProperties} style
   */

/**
 * some component
 * @augments {Component<Props, State>}
 */

 export default class SomeRandomClass extends React.Component { }

将上面的 JSDoc 添加到你的 react 组件将使 VS Code 能够建议所有可能的 CSS 属性。

【讨论】：

【解决方案10】：

由于之前的一些答案已被贬低，所以我想我可以在这里分享我的解决方案。

您可以简单地将类型ViewStyle、TextStyle、ImageStyle、FlexStyle 和ImageStyle 应用到样式界面。

例如：

import React from 'react';
import { TouchableOpacity, ViewStyle } from 'react-native';

interface IProps {
    style?: ViewStyle
}

<TouchableOpacity style={[props.style]}>
...
</TouchableOpacity>

备注：有些组件的 style 属性有其需要的类型，如上例，props.style 的类型不能是 TextStyle 或其他，只能是 ViewStyle，希望对您有所帮助。

【讨论】：