RN笔记之prop-types进行属性确认

一、基本介绍

1、属性确认的作用

1）、使用React-native创建的组件是可以复用的，所以我们封装的组件可以用在其他项目或给项目组其他人使用。但是别人可能对这个组件不熟悉，经常忘记使用某些属性，或者某些属性传递的数据类型有误。因此我们可以在开发React Native自定义组件时，可以通过属性确认来声明这个组件需要哪些属性。这样，如果在调用这个自定义组件时没有提供相应的属性，则会在手机与调试工具中弹出警告信息，告知开发者该组件需要哪些属性。
注意：为了保证React Native代码高效运行，属性确认仅在开发环境中有效。也就是说，正式发布的App运行时是不会进行检查的。

2）、进入项目根目录，执行如下代码安装prop-types库：
yarn add prop-types
3)、在需要使用的JS文件中使用如下代码引入：
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、要求属性为指定类型中的一个

扫描二维码关注公众号，回复： 6150922 查看本文章

属性：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

三、将属性声明为必需的

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

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

四、示例

自定义NavigationBar中有部分使用，可以借鉴

作者：漫随天际云卷云舒
链接：https://www.jianshu.com/p/2325e7802ceb
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

RN笔记之prop-types进行属性确认

猜你喜欢