在 React Native 中验证 Style 属性类型

问题描述

我有一个组件，它带有一个包含子组件的语法的属性.我想确保 propTypes 正确验证它的类型.我可以从 React Native 代码中得知它有一个 ViewStylePropTypes 提供此功能的模块，但是我似乎无法找到它在哪里/是否公开.

I have an component that takes a property which contains the syling for a sub-component. I would like to ensure propTypes correctly validates it's type. I can from the React Native code that it has a ViewStylePropTypes module that provides this, however I cannot seem to find where/if it is exposed.

我想知道的是，在不重新发明轮子的情况下验证这一点的正确方法是什么?

What I want to know is, what is the correct way of validating this without reinventing the wheel?

推荐答案

要强制 PropTypes 的样式限制，只需使用以下内容，具体取决于您正在渲染的组件类型:

To enforce styling restrictions for PropTypes just use the following, dependent on what type of component you are rendering:

MyComponent.propTypes = {
  /**
  * Style to be applied to the containing <View>
  */
  buttonStyle: View.propTypes.style,
  /**
  * Style to be applied to the inner <Text>
  */
  textStyle: Text.propTypes.style
}

例如Text.propTypes.style 将在textStyle 属性中定义border 时显示一个YellowBox 警告.

For example Text.propTypes.style will show a YellowBox warning when border is defined in thetextStyle property.

注意:这也将导致在渲染 Text 内部时发生的常规 Failed prop type provided to Text... 警告具有无效样式属性的组件.propTypes 验证允许您的自定义组件同时验证这一点，从而为您提供更好的粒度.

Note: This will also result in the regular Failed prop type supplied to Text... warning that occurs when rendering Text inside a component with an invalid style attribute. The propTypes validation allows your custom component to also validate this at the same time, giving you better granularity.

这篇关于在 React Native 中验证 Style 属性类型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！