2.1.3 声明属性和属性检查

因为用 React Native 创建的自定义组件可以复用，开发过程一个项目组一般有多个人同时开发，其他同事可能会用到我们的自定义的组件，但是他们使用的时候很容易忘记使用某些属性，这时候我们应该在自定义组件中声明一些属性。

简单说，一个组件应该可以规范以下这些方面：

• 这个组件支持哪些属性；
• 每个属性应该是什么样的格式。

在 RN 中，可以通过增加组件的 propTypes 属性来定义 prop 规格，这不只是声明，而且是一种限制，在运行时和静态代码检查时，都可以根据 propTypes 判断外部世界是否正确地使用了组件的属性。

Counter 组件目前需要对外需要暴露 initValue 和 style 组件。定义代码如下：

import PropTypes from 'prop-types';
export default class Counter extends Component {
    //...
}
Counter.propTypes={
    initValue:PropTypes.number.isRequired,
    style:PropTypes.object
};

其中 initValue 必须是 number 类型，style 是对象类型的。还有一个区别，Counter 组件带上了 isRequired 表示使用 Counter 组件必须指定 initValue ；如果使用该组件不指定该属性，则会在开发阶段产生警告。如图2-5 所示。 图2-5 代码警告

除了 number 和 object 还有其它类型的属性。下面再来看看声明属性的类型：

一、要求属性是JavaScript基本类型

PropTypes.array;
PropTypes.bool;
PropTypes.func;
PropTypes.number;
PropTypes.object;
PropTypes.string;

二、要求属性是可渲染节点

PropTypes.node

三、要求属性是某个 React Native 元素

PropTypes.element

四、要求属性是某个指定类的实例

PropTypes.instanceOf(NameOfClass)

五、要求属性取值为几个特定的值

PropTypes.oneOf(['值1','值2'])

六、属性可以为指定类型中的任意一个

PropTypes.oneOfType([
    PropTypes.node,
    PropTypes.string  
])

七、属性可以为指定类型的数组

React.PropTypes.arrayOf(React.PropTypes.number)

八、要求属性是一个有指定成员变量的对象 下面的语句要求传入的对象有一个成员变量是number类型.

PropTypes.objectOf(PropTypes.number)

九、要求属性是一个指定构成方式的对象

PropTypes.shape({
      color :PropTypes.string,
      fontSize: PropTypes.number
})

十、属性可以为任意类型

PropTypes.any

上面的10种语法,都可以通过在后面加上isRequired声明它是必需的。

属性默认值

我们还可以给属性指定一个默认值，当没有传递该属性时使用默认值，如:

export default class Counter extends Component {

    // 默认属性
    static defaultProps = {
        initValue: 1
    };
}

同时记得要将指定 initValue 为必须的isRequired去掉。

查看代码

如果你已经从 GitHub 上克隆了这个程序的 Git 仓库，那么可以执行 git checkout 2c签出程序的这个版本。