类型检查

• 对props里面的属性进行类型判断，可以使用propTypes来做到，同样需要使用 static关键字来修饰。
• isRequired 可以指定必填项
• propTypes属性 在 react 包中，需要先导入才能使用。import PropTypes from 'prop-types'

static propTypes={
        name: PropTypes.string.isRequired,
        age: PropTypes.number,
        //要求属性取值为特定的几个值
        sex: PropTypes.oneOf(['man', 'woman']),

        //要求属性可以为指定类型中的任意一个
        tel: PropTypes.oneOfType([
            PropTypes.string,
            PropTypes.number,
          ]),
    }

全部类型检查说明：

//JS 基本数据类型
export const any: Requireable<any>;
export const array: Requireable<any[]>;
export const bool: Requireable<boolean>;
export const func: Requireable<(...args: any[]) => any>;
export const number: Requireable<number>;
export const object: Requireable<object>;
export const string: Requireable<string>;

//可以被渲染的对象 numbers, strings, elements 或 array
export const node: Requireable<ReactNodeLike>;

////  React 元素
export const element: Requireable<ReactElementLike>;

export const symbol: Requireable<symbol>;

// 用 JS 的 instanceof 操作符声明 prop 为类的实例。
export function instanceOf<T>(expectedClass: new (...args: any[]) => T): Requireable<T>;

// 用 enum 来限制 prop 只接受指定的值。
export function oneOf<T>(types: T[]): Requireable<T>;

// 可以是多个对象类型中的一个
export function oneOfType<T extends Validator<any>>(types: T[]): Requireable<NonNullable<InferType<T>>>;

 // 指定类型组成的数组
export function arrayOf<T>(type: Validator<T>): Requireable<T[]>;

// 指定类型的属性构成的对象
export function objectOf<T>(type: Validator<T>): Requireable<{ [K in keyof any]: T; }>;

//指定属性及其类型的对象
export function shape<P extends ValidationMap<any>>(type: P): Requireable<InferProps<P>>;

export function exact<P extends ValidationMap<any>>(type: P): Requireable<Required<InferProps<P>>>;
任意类型加上 isRequired 来使 prop 不可空，比如name不能为空：

static propTypes={
        name: PropTypes.string.isRequired,
        age: PropTypes.number,
    }

部分类型举例：

1.PropTypes.shape

//子组件CheckObjectComponent 中类型约束：
static propTypes={
        //指定属性及其类型的对象，
        position: PropTypes.shape({
            num: PropTypes.number.isRequired,
            job:PropTypes.string,
        }),
    }

//父组件调用：

var shapeParams = {name: '王五', age: 23, sex: 'man',position:{num:'1010001',job:"iOS开发"}};
...
<CheckObjectComponent position = {shapeParams. position} />
//或延展写法：
<CheckObjectComponent {...shapeParams}/>

2. PropTypes.element

约束属性是React元素，实例：

//子组件CheckElementComponent中：
export class CheckElementComponent extends Component {
    static propTypes={
        //元素
        addressElement:PropTypes.element,
    }
    
    constructor(props) {
        super(props);
    };

    render(){
        return (
            <View style={styles.container}>
                <View><Text>地址:</Text>{this.props.addressElement}</View>
            </View>
        );
    }
}

//父组件调用：
var elementParams = {addressElement:<View><Image source={require('../../images/tabBar/me_normal.png')}></Image><Text style={[{color:'blue'}]}>我在北京....</Text></View>};
...
<CheckElementComponent {...elementParams}/>

3. PropTypes.instanceOf

//子组件CheckInstanceOfComponent：
export class CheckInstanceOfComponent extends Component {
    static propTypes={
        //声明属性为某个类的实例
    addressElement:PropTypes.instanceOf(CheckElementComponent),
    }
    
    constructor(props) {
        super(props);
    };

    render(){
        return (
            <View style={styles.container}>
                {this.props.addressElement}
            </View>
        );
    }
}

//父组件调用：

var temElement = {addressElement:<Text style={[{color:'blue'}]}>我是instanceOf（CheckElementComponent）实例！</Text>};
var testInstance = <CheckElementComponent {...temElement}></CheckElementComponent>
...
<CheckInstanceOfComponent {...instanceOfParams}/>
...