前言
眼看很多公司都开始尝试使用ReactNative,达到跨平台开发，最近也写了很多文章，希望让更多想了解的同学快速上手ReactNative.
如果喜欢我的文章，可以关注我微博:袁峥Seemygo
ReactNative之PropTypes
- 问题：在自定义组件的时候，通常需要暴露属性出去，并且设置属性类型，外界在使用自定义属性的时候，就自动有提示属性功能，。
- 解决：使用PropTypes就能解决
- PropTypes用处：
- 可以实现类型检查，当传入错误的属性值，会报警告，但是不会报错
- 用PropTypes定义属性，外界使用的时候，会有提示。
- 注意：
- PropTypes必须要用static声明，否则无效果。
- PropTypes 只能用于React框架的自定义组件，默认JS是没有的，因为它是React框架中的。
static：用来定义类方法或者类属性，定义类的方法和属性，生成的对象就自动有这样的属性了。
PropTypes使用步骤
- PropTypes:属性检测，使用的时候需要先导入，在React框架中
import React, { Component,PropTypes } from 'react';
- 使用
// 订阅类属性类型,检查属性类型
static propTypes = {
name : PropTypes.string,
age : PropTypes.number
}
- 效果
效果.png
属性类型PropTypes
# 数组类型
PropTypes.array
# 布尔类型
PropTypes.bool
# 函数类型
PropTypes.func
# 数值类型
PropTypes.number
# 对象类型
PropTypes.object
# 字符串类型
PropTypes.string
# 规定prop为必传字段
PropTypes.func.isRequired
# prop可为任意类型
PropTypes.any.isRequired
给自定义属性设置初始化值
-
defaultProps:如果想给自定义属性设置初始化值,需要使用defaultProps 注意：也需要添加static- 使用
// 自定义属性，设置初始值
static defaultProps = {
name:'xmg',
age:20
}
案例代码
/**
* Created by ithinkeryz on 2017/5/10.
*/
import React, { Component,PropTypes } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
} from 'react-native';
export default class XMGView extends Component {
// 定义属性
static propTypes = {
name:PropTypes.string,
age:PropTypes.number
}
// 初始值
static defaultProps = {
name:'xmg',
age:2
}
render() {
// 打印出来, xmg
console.log(this.props.name)
return (
<View>
</View>
)
}
}
