前言

眼看很多公司都開始嘗試使用ReactNative,達到跨平臺開發(fā)，最近也寫了很多文章，希望讓更多想了解的同學快速上手ReactNative.

如果喜歡我的文章，可以關注我微博:袁崢Seemygo

ReactNative之模塊導出

• 什么是模塊？在JS開發(fā)中每一個文件可以稱為一個模塊，RN基于JS開發(fā)，因此也是可以這么叫。

自定義組件導出

• 在RN中，一般自定義組件都需要弄一個單獨文件，那怎么導出這個文件中的組件了。

• 導出有兩種形式，一種叫默認組件，一種叫非默認組件,開發(fā)中一般使用默認組件

• 在ES6中，一般都使用默認組件，ES5使用非默認組件，因為ES6支持import導出，ES5支持require。

• 非默認組件定義

export  class CommonGroupListView extends Component

• 外界如何引入非默認組件

import {CommonGroupItem} from '../CommonGroupListView/CommonGroupItem'

• 默認組件定義

export default class CommonGroupListView extends Component

• 外界如何引入默認組件

import CommonGroupItem from '../CommonGroupListView/CommonGroupItem'

• 非默認組件需要加入{}，比默認組件麻煩

自定義類（定義與導出）

• 在RN中，有時候需要搞一個文件自定義類，一樣可以采用導出組件的方法導出自定義類
• 自定義類與自定義組件的區(qū)別：
  • 組件繼承與Component
  • 自定義組件：必須使用class定義類，自定義類可以不使用class定義類

沒有對象屬性的自定義類 （定義與導出）

• 如果一個自定義類，沒有對象屬性，都是類方法和類屬性，一般使用組件的定義方式(class)和導出方式(export default)。

export default class XMGRequest {
    static PostWithJsonParam(url,param,success,failure) {

        var paramStr = JSON.stringify(param);

        // post請求描述
        var requestDesc = {
            method:'POST',
            headers:{
                'Content-Type':'application/json'
            },
            body:paramStr
        };

        // 發(fā)送post請求
        fetch(url,requestDesc)
            .then((response)=>response.json())
            .then((json)=>{
                success(json);
            })
            .catch((error)=>{
                failure(error);
            })
    }

}
 

• 外界如何引入自定義類

import XMGRequest from './XMGRequest'

有對象屬性的自定義類（定義與導出）

• 如果一個自定義類，有對象屬性，通常不用使用組件的定義方式(class)和導出方式(export default),一般用function定義類，module.exports導出。

• 因為使用class，沒法生成帶有屬性的構造方法，就不能在初始化對象的時候，給屬性賦值。

• 導出方式：一般規(guī)范是module.exports，也可以使用export default。

• class定義類與function定義類的區(qū)別：

• 使用class定義類，在類中聲明任何屬性，和方法都會自動生成對象的屬性和方法.

• 使用class定義類

export default class Person {

    // 需要創(chuàng)建對象調用
    // 定義屬性
    age = 0

    name = ''

    // 定義對象方法
    eat(){
       console.log('吃飯');
    }

}

• 使用function類，要想定義屬性和方法，屬性和方法前面必須添加this.

function CommonGroupItem(sectionID,rowData) {

    this.sectionID = sectionID;

    this.rowData = rowData;

    this.eat = function () {

    }
}

• 導出自定義類兩種方式
• module.exports

function CommonGroupItem(sectionID,rowData) {

    this.sectionID = sectionID;

    this.rowData = rowData;

    this.eat = function () {

    }
}

module.exports = CommonGroupItem;

• export default

export default function CommonGroupItem(sectionID,rowData) {

    this.sectionID = sectionID;

    this.rowData = rowData;

    this.eat = function () {

    }
}

• 外界如何引入自定義類

import CommonGroupItem from '../CommonGroupListView/CommonGroupItem'