react-native中使用prop-types或flow类型检测方式

背景：当我们写的通用组件被其他人复用时，很可能不了解需要传递哪些参数以及参数的接收类型。而类型检测工具可以帮助小伙伴们在复用我们的组件且参数数据类型传递错误时，报错提醒，帮助开发者快速定位问题所在

一、 prop-types类型的检测

（1）安装及引入

//安装
npm install prop-types --save
//引入
import PropTypes from 'prop-types';

（2）使用

import {Text} from 'react-native';

class DatePicker extends React.Component {
  render() {
    return (
      <Text>测试属性检测，{this.props.age}</Text>
    );
  }
}

DatePicker.defaultProps = {
  age: 0, // 默认值
};

DatePicker.propTypes = {
  age: PropTypes.number, // 这边年龄只允许接收数字类型
};

(3)ES7中使用方法示例

class DatePicker extends React.Component {
  //如果没有传递该属性时的默认值
  static defaultProps = {
    age: 17
  }
  //如果传递该属性，该属性值必须为字符串
  static propTypes = {
    age: PropTypes.number
  }
  render() {
    return (
      <div>测试类型检测, {this.props.age}</div>
    )
  }
}

 

(4)使用isRequired设置属性为必须传递的值

static propTypes={
    name:PropTypes.string.isRequired
}

(5)管饭提供的类型检测种类集合 

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>;
export const node: Requireable<ReactNodeLike>;
export const element: Requireable<ReactElementLike>;
export const symbol: Requireable<symbol>;
export function instanceOf<T>(expectedClass: new (...args: any[]) => T): Requireable<T>;
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>>>;

(6)具体使用示例

DatePicker.propTypes = {
  onPress: PropTypes.func,
  mode: PropTypes.oneOf(['date', 'datetime', 'time']),
  androidMode: PropTypes.oneOf(['clock', 'calendar', 'spinner', 'default']),
  date: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date), PropTypes.object]),
  format: PropTypes.string,
  minDate: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date)]),
  maxDate: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date)]),
  height: PropTypes.number,
  duration: PropTypes.number,
  confirmBtnText: PropTypes.string,
  cancelBtnText: PropTypes.string,
  iconSource: PropTypes.oneOfType([PropTypes.number, PropTypes.object]),
  iconComponent: PropTypes.element,
  customStyles: PropTypes.object,
  showIcon: PropTypes.bool,
  disabled: PropTypes.bool,
  allowFontScaling: PropTypes.bool,
  onDateChange: PropTypes.func,
  onOpenModal: PropTypes.func,
  onCloseModal: PropTypes.func,
  onPressMask: PropTypes.func,
  placeholder: PropTypes.string,
  modalOnResponderTerminationRequest: PropTypes.func,
  is24Hour: PropTypes.bool,
  getDateStr: PropTypes.func,
  locale: PropTypes.string
};

 

PS: 参考这位博主的文章更详细

https://www.jianshu.com/p/a73fb26c88b5 

 

二、flow类型检测

待续