前言

眼看很多公司都開始嘗試使用ReactNative,達(dá)到跨平臺開發(fā)，最近也寫了很多文章，希望讓更多想了解的同學(xué)快速上手ReactNative.

如果喜歡我的文章，可以關(guān)注我微博:袁崢Seemygo

ReactNative之PropTypes

• 問題：在自定義組件的時候，通常需要暴露屬性出去，并且設(shè)置屬性類型，外界在使用自定義屬性的時候，就自動有提示屬性功能，。
• 解決：使用PropTypes就能解決
• PropTypes用處：
  • 可以實(shí)現(xiàn)類型檢查，當(dāng)傳入錯誤的屬性值，會報警告，但是不會報錯
  • 用PropTypes定義屬性，外界使用的時候，會有提示。
• 注意：
  • PropTypes必須要用static聲明，否則無效果。
  • PropTypes 只能用于React框架的自定義組件，默認(rèn)JS是沒有的，因?yàn)樗荝eact框架中的。

•  static：用來定義類方法或者類屬性，定義類的方法和屬性，生成的對象就自動有這樣的屬性了。
  

PropTypes使用步驟

• PropTypes:屬性檢測，使用的時候需要先導(dǎo)入，在React框架中

import React, { Component,PropTypes } from 'react';

• 使用

    // 訂閱類屬性類型,檢查屬性類型
    static propTypes = {
        name : PropTypes.string,
        age : PropTypes.number
    }

• 效果

效果.png

屬性類型PropTypes

# 數(shù)組類型
PropTypes.array

# 布爾類型
PropTypes.bool

# 函數(shù)類型
PropTypes.func

# 數(shù)值類型
PropTypes.number

# 對象類型
PropTypes.object

# 字符串類型
PropTypes.string

# 規(guī)定prop為必傳字段
PropTypes.func.isRequired

# prop可為任意類型
PropTypes.any.isRequired

給自定義屬性設(shè)置初始化值

• defaultProps:如果想給自定義屬性設(shè)置初始化值,需要使用defaultProps

•  注意：也需要添加static
  

• 使用

//  自定義屬性，設(shè)置初始值
    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>
        )
    }

}