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類型檢測

待續