如何在道具类型中声明样式？

启用 禁止道具规则后，eslint禁止我使用 style: React.PropTypes.object，建议使用 shape。

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

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

定义代码太多了！

44271 次浏览
小开

一种可能性是这样使用 反应式原型机反应式原型机软件包:

import stylePropType from 'react-style-proptype';


MyComponent.propTypes = {
style: stylePropType,
};
小开 
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

小开

反应本机现在包含 ViewPropTypes，它将取代 View.propTypes.style。使用示例:

import { ViewPropTypes } from 'react-native';


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

使用 ViewPropTypes.style。已不推荐使用 View.propTypes

小开

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

小开

又快又脏，像黑客一样

扩展@jalal246回答:

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

这可以用于 Web 样式(参考其他答案的反应本机) ，而不必使用其他包。

小开

使用下面的简单代码。

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

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

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

测试的 RN > 0.57。

小开

有两种可能。第一种，我更喜欢，是使用反应中的 ViewPropType。另一个是使用 PropType 的:

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

您可能会问“如果样式只是一个对象，为什么要使用 PropTypes.number?”答案是本地反应团队进行了一些优化，缓存了样式表并简单地发送了缓存的 ID。

小开

对付 JSDoc 有个简单的办法。

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


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


export default class SomeRandomClass extends React.Component { }

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

小开

由于前面的一些答案已经被分解了，所以我将在这里分享我的解决方案。

实际上，您可以简单地从反应本机导入原始类型，如 ViewStyle、 TextStyle、 ImageStyle、 FlexStyle和 ImageStyle。

例如:

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


interface IProps {
style?: ViewStyle
}


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

备注: 如果您正在使用支持 TypeScript 的第三方库，那么也应该有相关的样式属性，就像上面的例子一样。


提交答案