zoukankan      html  css  js  c++  java
  • 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,
    
    
         */
     
  • 相关阅读:
    Sendkeys 和 Sendmessage 使用技巧一例
    和菜鸟一起学算法之二分法求极值问题
    和菜鸟一起学算法之三分法求极值问题
    和菜鸟一起学证券投资之国内生产总值GDP
    和菜鸟一起学OK6410之Led字符驱动
    和菜鸟一起学OK6410之最简单驱动模块hello world
    和菜鸟一起学OK6410之交叉编译hello world
    和菜鸟一起学android4.0.3源码之touchscreen配置+调试记录
    和菜鸟一起学android4.0.3源码之红外遥控器适配
    和菜鸟一起学OK6410之最简单字符驱动
  • 原文地址:https://www.cnblogs.com/hualuoshuijia/p/10150497.html
Copyright © 2011-2022 走看看