一、使用环境
- Mac 电脑 系统10.14.2
- Xcode9.4
- react-native-cli版本 2.0.1
- react-native: 0.57.3
- webstorm
二、PropTypes的简介
- 1.自定义组件的时候暴露属性到外界时候,外界调用组件具有属性提示;
- PropTypes提供很多验证器,可以验证输入内容的类型等,当前检测到类型不对时候,控制台会警告,但是不会报错
PropTypes的使用注意
- 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的使用步骤
- 导入PropTypes所在库
import PropTypes from 'prop-types'
- 定义属性使用,注意类型不要写错,误把bool-> 写成boolean
//定义暴露属性,进行类型检查
static propTypes ={
gif: PropTypes.string,
age: PropTypes.number,
success: PropTypes.bool
}
-
使用时候提示效果 空格提示
如果需要对暴露属性设置默认值,可以使用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-导航页面传值（正传和逆传）
