PropTypes

属性确认的作用

使用 React Native 创建的组件是可以复用的，所以我们开发的组件可能会给项目组其他同事使用。但别人可能对这个组件不熟悉，常常会忘记使用某些属性，或者某些属性传递的数据类型有误。

因此我们可以在开发 React Native 自定义组件时，可以通过属性确认来声明这个组件需要哪些属性。这样，如果在调用这个自定义组件时没有提供相应的属性，则会在手机与调试工具中弹出警告信息，告知开发者该组件需要哪些属性。

 

prop-types 库使用

和其他的第三方库使用类似，prop-types的安装首先进入项目根目录，执行如下代码安装 prop-types 库：

?

1	npm install --save prop-types

然后在需要使用PropTypes属性的地方引入：

?

1	import PropTypes from 'prop-types';

 

语法

1，要求属性是指定的 JavaScript 基本类型。例如：

属性: PropTypes.array,
属性: PropTypes.bool,
属性: PropTypes.func,
属性: PropTypes.number,
属性: PropTypes.object,
属性: PropTypes.string,

2，要求属性是可渲染节点。例如：

属性: PropTypes.node,

3，要求属性是某个 React 元素。例如：

属性: PropTypes.element,

4，要求属性是某个指定类的实例。例如：

属性: PropTypes.instanceOf(NameOfAClass),

5，要求属性取值为特定的几个值。例如：

属性: PropTypes.oneOf(['value1', 'value2']),

6，要求属性可以为指定类型中的任意一个。例如：

属性: PropTypes.oneOfType([
  PropTypes.bool,
  PropTypes.number,
  PropTypes.instanceOf(NameOfAClass),
])

7，要求属性为指定类型的数组。例如：

属性: PropTypes.arrayOf(PropTypes.number),

8，要求属性是一个有特定成员变量的对象。例如：

属性: PropTypes.objectOf(PropTypes.number),

9，要求属性是一个指定构成方式的对象。例如：

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

10，属性可以是任意类型。例如：

属性: PropTypes.any

将属性声明为必须

使用关键字 isRequired 声明它是必需的。

属性: PropTypes.array.isRequired,
属性: PropTypes.any.isRequired,
属性: PropTypes.instanceOf(NameOfAClass).isRequired,

默认属性，以及它的作用

由于props的属性都是上个页面传递的，所以无法修改它。但是我们可以在PropsTest文件中，给props定义一些默认的值。

?

1 2 3 4 5 6 7 8

exprot default class PropsTestextends Component{   static defaultProps={     name: 'XiaoHong'   }   render(){     return <Text>{this.props.name}</Text>   } }

注意，defaultProps 需要使用static关键字来做静态修饰。这样，如果上个页面没有传值，则显示的是这个默认的属性。