ReactNative从零开始笔记4-PropTypes使用

一、使用环境

• Mac 电脑 系统10.14.2
• Xcode9.4
• react-native-cli版本 2.0.1
• react-native: 0.57.3
• webstorm

二、PropTypes的简介

• 1.自定义组件的时候暴露属性到外界时候,外界调用组件具有属性提示;
• 2. PropTypes提供很多验证器,可以验证输入内容的类型等,当前检测到类型不对时候,控制台会警告,但是不会报错

PropTypes的使用注意

• 1. PropTypes必须要用static声明，否则无效果

• 2 在.React v15.5,PropTypes被从react库中拿了出来,单独放在了一个名为prop-types的库中,意味着导入方式变了

• React v15.5之前,PropTypes属于react库

import { PropTypes } from 'react';

• ReactV15.5 之后 PropTypes属于prop-types库

 import PropTypes from 'prop-types'

三、PropTypes的使用步骤

1. 导入PropTypes所在库

  import PropTypes from 'prop-types'

2. 定义属性使用,注意类型不要写错,误把bool-> 写成boolean

   //定义暴露属性,进行类型检查
  static propTypes ={
      gif: PropTypes.string,
      age: PropTypes.number,
      success: PropTypes.bool
}

3. 使用时候提示效果 空格提示

   
   
   

4. 如果需要对暴露属性设置默认值,可以使用defaultProps

  static defaultProps={
      gif: '没有礼物',
      age: 20,
      success: false
  }

四、属性类型PropTypes注解

  # 数组类型
 PropTypes.array

 # 布尔类型
 PropTypes.bool

 # 函数类型
 PropTypes.func

 # 数值类型
 PropTypes.number

 # 对象类型
 PropTypes.object

 # 字符串类型
 PropTypes.string

 # 规定prop为必传字段
 PropTypes.func.isRequired

 # prop可为任意类型, 任意不为空对象
 PropTypes.any

#数组中元素的类型
PropTypes.any. arrayOf()

#React 元素
PropTypes.element

#类实例
PropTypes.instanceOf()

#每个值的类型都是基本类型
PropTypes.node

#参数是数组, 指定传的数据为数组中的值,可以当做枚举类型使用
PropTypes.oneOf()

e.g-比如
color: PropTypes.oneOf(['red', 'blue', 'black'])

# 参数是数组, 指定传的数据为数组中的类型
 PropTypes.oneOfType()
 
 #  指定对象类型内部的结构定义
  PropTypes.shape()
  e.g-比如
  model:PropTypes.shape(
        {
          id: PropTypes.string,
          name: PropTypes.string 
        }
      )

其他资料
ReactNative从零开始笔记1-初始化项目
ReactNative从零开始笔记2-组件的生命周期
ReactNative从零开始笔记3-state(状态)与props(属性)
ReactNative从零开始笔记4-PropTypes使用
ReactNative从零开始笔记5-组件传值(父子组件/兄弟组件)
ReactNative从零开始笔记6-导航页面传值（正传和逆传）