react-native 元件的匯入、匯出
阿新 • • 發佈:2018-12-23
一、前言背景:
學習react native的關鍵在於元件,依靠元件的拼接達到想要的效果,由此可見,元件就像一塊塊功能各異的零件,最終搭建出我們想要的效果。
今天我們就從元件的匯入、匯出開始
下面是我們編寫react native程式碼時,很普遍的程式碼正規化:
import React, {Component} from 'react'
import {View, Text} from 'react-native'
export default class Example extends Component {
...
}
其實,這就是體現了元件的匯入和匯出,import匯入,export匯出
二、分析
(一)、問題:
- 如何匯出元件、如何使用匯出的元件(即匯入)?
- 如何匯出變數和常量,又如何使用?
- 如何匯出方法,又如何使用?
(二)、解決
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}
三、結束