React Native中Text组件样式PropTypes验证问题求助

首先，问题的核心很清晰：你给嵌套的<Text>组件传递样式，但用了ViewPropTypes.style来做PropTypes验证——而View的样式类型并不包含Text特有的属性（比如color、fontSize、fontFamily等），所以传入这些属性时自然会触发警告。至于你导入TextStylePropTypes得到undefined，大概率是导入路径不正确导致的。

下面给你两种可行的解决方案：

方案一：直接使用正确的Text样式PropTypes类型 #

在React Native中，TextStylePropTypes是可以直接从react-native主模块导入的，不需要引用内部文件路径。修改你的代码如下：

import React, { PureComponent } from 'react';
import { View, Text, TextStylePropTypes } from 'react-native';

export default class CustomComponent extends PureComponent {
  render() {
    return (
      <View>
        <Text style={this.props.style}>Some text</Text>
      </View>
    );
  }
}

CustomComponent.defaultProps = {
  style: null,
};

CustomComponent.propTypes = {
  style: TextStylePropTypes,
};

这样验证的就是Text专属的样式类型，包含color等所有Text支持的样式属性，不会再触发警告。

方案二：合并View和Text的样式类型（可选） #

如果你的组件未来可能需要同时支持View和Text的样式属性（比如外层View也需要继承部分样式），可以用PropTypes.oneOfType合并两种样式类型：

import React, { PureComponent } from 'react';
import { View, Text, ViewPropTypes, TextStylePropTypes, PropTypes } from 'react-native';

export default class CustomComponent extends PureComponent {
  render() {
    return (
      <View>
        <Text style={this.props.style}>Some text</Text>
      </View>
    );
  }
}

CustomComponent.defaultProps = {
  style: null,
};

CustomComponent.propTypes = {
  style: PropTypes.oneOfType([
    ViewPropTypes.style,
    TextStylePropTypes,
  ]),
};

为什么之前导入TextStylePropTypes会是undefined？ #

你之前直接引用了RN内部的文件路径，这是不推荐的——RN的内部模块结构可能随版本更新变化，而且打包系统不一定能正确解析这类路径。始终从react-native主模块导入公开的API，才能保证兼容性。

另外，如果你的RN版本较新（0.63+），注意如果需要使用基础的PropTypes方法（比如oneOfType、array等），可能需要单独安装prop-types包：

npm install prop-types --save

然后导入：

import PropTypes from 'prop-types';

内容的提问来源于stack exchange，提问作者patman