学习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}
原文:https://www.cnblogs.com/nangezi/p/9918179.html