一、前言背景：

　　學習react native的關鍵在於元件，依靠元件的拼接達到想要的效果，由此可見，元件就像一塊塊功能各異的零件，最終搭建出我們想要的效果。

　　今天我們就從元件的匯入、匯出開始

　　下面是我們編寫react native程式碼時，很普遍的程式碼正規化：

import React, {Component} from 'react'
import {View, Text} from 'react-native'

export default class Example extends Component {
    ...    
}

其實，這就是體現了元件的匯入和匯出，import匯入，export匯出

二、分析

（一）、問題：

1. 如何匯出元件、如何使用匯出的元件（即匯入）？
2. 如何匯出變數和常量，又如何使用？
3. 如何匯出方法，又如何使用？

（二）、解決

　　ES6匯入匯出元件：

//匯出Example元件
export default class Example extends Component{
    ...
}
//匯入元件
import Example from ''./Example

　　ES5匯入匯出元件：

//ES5匯入元件
var Example = React.createClass({
    ...
})
module.export 
 
= Example

//ES5的元件匯入
var {View, Text} = require('react-native')
var Example = require('./Example')

　　變數、常量的匯入匯出

//匯出變數和常量
export var name = '小米'
export const  age = '8'
//或者可以這樣。。
var newName = '大米'
const newAge = '18'
export {newName, newAge}

//匯出Example元件
export default class Example extends Component{
    ...
}
 
//匯入元件
import Example, {name, age, newName, newAge} from ''./Example

　　方法的匯入匯出（同變數、常量的匯入匯出）

//匯出變數和常量
export var name = '小米'
export const  age = '8'
//或者可以這樣。。
var newName = '大米'
const newAge = '18'
export {newName, newAge}
export function sum(a, b){
    return a+b;
}

//匯出Example元件
export default class Example extends Component{
    ...
}
//匯入元件
import Example, {name, age, newName, newAge, sum} from ''./Example

通過上面的程式碼可以發現：export匯出和export default匯出並不一樣

1. export default只可匯出一個，而export可以匯出多個

2.export default ***匯出的，匯入時需要直接匯入，如import ***；

而export匯出的多個，匯入時需要使用大括號來接收，如import {param1，param2} 

三、結束