PropTypes使用

Posted 2021-01-28 hualuoshuijia

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,


     */