ReactNative之PropTypes（七）

前言

眼看很多公司都开始尝试使用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>
        )
    }

}