React Native 坑點採集, 你中招了嗎

務必註銷監聽事件

Page A
	componentWillMount() {
		this.subscription = DeviceEventEmitter.addListener("toggleEditMode", () => { 
      alert('registry a event listenr'); 
    });
	}
  第一次進入 Page A:
  alert('registry a event listenr')
  第二次進入 Page A:
  alert('registry a event listenr') X 2

  緣由: RN 並不會自動註銷咱們註冊的事件, 須要手動註銷
  方法: 在 componentWillUnmount 生命週期中手動註銷, 而且註銷時注意先判斷存在此事件, 再執行 remove 方法
  componentWillUnmount() {
    // 註銷 subscription 事件的監聽
    this.subscription && this.subscription.remove();
  }
複製代碼

禁止字體隨系統字體一塊兒放大

在調整過系統字體的 RN 項目中, 頁面中的字體會跟隨系統字體一塊兒變化, 咱們須要調整組件屬性:
  TextInput.defaultProps = Object.assign({}, TextInput.defaultProps, { defaultProps: false });
  Text.defaultProps = Object.assign({}, Text.defaultProps, { allowFontScaling: false });
複製代碼

捕獲全局錯誤 保障 App 穩定度

有時候一些莫名的錯誤會發生, 但咱們又不能及時定位, 藉助這個語句有助於捕獲全局錯誤
  // 捕獲全局錯誤
  require('ErrorUtils').setGlobalHandler(err => { });
複製代碼

屏蔽 黃色警告 與 三指滑動

console.disableYellowBox = true // 關閉所有黃色警告
  console.reportErrorsAsExceptions = false // 屏蔽三指操做 (某些支持三指操做的機型可能會崩潰)
複製代碼

在互動和動畫的過程當中避免繁重的操做

爲了不在 互動和動畫的過程當中產生繁重的操做, 讓 JS 在執行完動畫的做務後再去執行 其它邏輯
  	componentDidMount() {
      InteractionManager.runAfterInteractions(() => {
        // 初次訪問頁面時切換 選項卡
        this.handleChangeTab('Usual');
        // 加載文章數據
        this.loadUsualData();
      });
    }

    使用 setImmediate 或 requestAnimationFrame 來避免繁重做務調度:
    setImmediate(() => {
      this.loadUsualData();
      ...
      ...
    });
    或
    requestAnimationFrame(() => {
      this.loadUsualData();
      ...
      ...
    });

    基於 JS 單線程的特色,咱們要避免在同一時間作較多的做務, 例如動畫渲染，接口請求，或是改變頁面樣式
複製代碼