ReactNative使用PropTypes

爲何使用PropTypes

動態語言都有這樣一個缺點，包括js，其變量類型要到程序運行的時候，待變量被賦了某個值才能知道其類型，代碼運行期間有可能會發生與類型相關的錯誤。爲了儘量地去避免這樣的狀況發生，ReactNative提供了PropTypes供開發者在自定義組件中規定暴露在外的屬性類型。

使用時，具備如下好處：

• 外界調用組件具備屬性提示;
• 在程序運行時，PropTypes的驗證器會驗證傳入屬性的類型和是否可爲空等，當前檢測到類型不對時候，控制檯會有警告提示

怎麼使用PropTypes

須要注意的地方：PropTypes必需要用static聲明，不然無效果

1. 導入

import PropTypes from 'prop-types'
複製代碼

2. 定義對外暴露的屬性類型

//定義暴露屬性,進行類型檢查
  static propTypes ={
      imageName: PropTypes.string.isRequired,
      imageWidth: PropTypes.number.isRequired,
      imageHeight: PropTypes.number.isRequired,
      imageInfo: PropTypes.object,
      couldStretch:PropTypes.bool
}
複製代碼

3. 能夠給屬性設置默認值

static defaultProps={
      imageName: 'flower',
      imageWidth: 60,
      imageHeight: 60,
      imageInfo: {location：{0，0}},
      couldStretch:true
  }
複製代碼

4. ReactNative爲咱們提供瞭如下可用類型

#任意類型
export const any: Requireable<any>;
#數組類型
export const array: Requireable<any[]>;
#bool類型
export const bool: Requireable<boolean>;
#數值類型
export const number: Requireable<number>;
#字符串類型
export const string: Requireable<string>;
#對象類型
export const object: Requireable<object>;
#函數類型
export const func: Requireable<(...args: any[]) => any>;
#每一個值的類型都是基本類型
export const node: Requireable<ReactNodeLike>;
#React 的標籤元素（對象）
export const element: Requireable<ReactElementLike>;
#React 的標籤元素類型 （類）
export const elementType: Requireable<ReactComponentLike>;

export const symbol: Requireable<symbol>;
#類實例
export function instanceOf<T>(expectedClass: new (...args: any[]) => T): Requireable<T>;
export function oneOf<T>(types: ReadonlyArray<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; }>;
# 指定對象類型內部的結構定義，好比：
# model:PropTypes.shape({
# id: PropTypes.string,
# name: PropTypes.string 
# })
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>>>;
複製代碼

先到這裏，後續補充使用效果和使用場景；

---

筆者和朋友作了淘寶優惠券公衆號，購物領券省錢，幫忙關注一下。