PropTypes使用

PropTypes防止后期代码传参数错误,所以加一个校验,

代码:

import React, {Component,PropTypes} from 'react';
import {View, Text, StyleSheet,TouchableOpacity} from 'react-native';


class CustomView extends Component {
  
    static propTypes = {
        name:PropTypes.string.isRequired,//姓名 isRequired必填项
        like:PropTypes.array,//爱好
        age:PropTypes.number,//年龄
        adult:PropTypes.bool,//是否成年
        sex: PropTypes.oneOf(['man', 'woman']),//性别
        eat:PropTypes.func,//吃饭
        object:PropTypes.shape({a: PropTypes.string, b: PropTypes.number}),//指定形式
        arrayOf: PropTypes.arrayOf(PropTypes.number),//指定类型的数组
        oneOfType: PropTypes.oneOfType([//指定其中一种类型
            PropTypes.string,
            PropTypes.number,
        ]),
        objectOf: PropTypes.objectOf(PropTypes.number),//指定某种对象

    }

    eat(value){
        this.props.eat("banana");
    }
    render() {
        return (
            <View style={styles.container}>
                <Text>name:{this.props.name}</Text>
                <Text>like:{this.props.like}</Text>
                <Text>age:{this.props.age}</Text>
                <Text>adult:{this.props.adult}</Text>
                <Text>sex:{this.props.sex}</Text>
                <Text>shape:a:{this.props.object.a}b:{this.props.object.b}</Text>
                <Text>arrayOf:{this.props.arrayOf}</Text>
                <Text>oneOfType:{this.props.oneOfType}</Text>
                <Text>objectOf:{this.props.objectOf}</Text>
                <TouchableOpacity onPress={()=>this.eat("banana")}>
                  <Text>eat</Text>
                </TouchableOpacity>
            </View>
        );
    }


}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems:'center',
        justifyContent: 'center'
    },

});

 

 

 使用:

  eat(value){
      alert(value)
    }
  render() {
    return (
     <CustomView
         name="lpp"
         like={['画画','唱歌']}
         age={19}
         adult={true}
         sex="man"
         object={{a:"aa",b:12}}
         arrayOf={[1,2,3,4,5,6]}
         oneOfType="好人"
         objectOf={[5,6,8,9]}
         eat={(value)=>this.eat(value)}
        />
    );
  }

 

 

  /**
     any: createAnyTypeChecker(),
     element: createElementTypeChecker(),
     instanceOf: createInstanceTypeChecker,
     node: createNodeChecker(),
     object: createPrimitiveTypeChecker('object'),
     symbol: createPrimitiveTypeChecker('symbol'),


     string: createPrimitiveTypeChecker('string'),
     array: createPrimitiveTypeChecker('array'),
     number: createPrimitiveTypeChecker('number'),
     bool: createPrimitiveTypeChecker('boolean'),
     func: createPrimitiveTypeChecker('function'),
     shape: createShapeTypeChecker
     oneOf: createEnumTypeChecker,
     arrayOf: createArrayOfTypeChecker,
     objectOf: createObjectOfTypeChecker,
     oneOfType: createUnionTypeChecker,


     */
 

 

转载于:https://www.cnblogs.com/hualuoshuijia/p/10150497.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值