在 React Native 中验证 Style 属性类型

Question

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

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

Answer 1

要对PropTypes 实施样式限制，只需使用以下内容，具体取决于您要呈现的组件类型：

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
}

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

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