码迷,mamicode.com
首页 > 其他好文 > 详细

PropTypes使用

时间:2018-12-20 18:43:11      阅读:215      评论:0      收藏:0      [点我收藏+]

标签:一个   pre   技术分享   nod   pac   value   sre   prim   type   

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,


     */
 

 

PropTypes使用

标签:一个   pre   技术分享   nod   pac   value   sre   prim   type   

原文地址:https://www.cnblogs.com/hualuoshuijia/p/10150497.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!