- 概述:
开发的过程中,有很多需要抽象出来可以拿来公用的模块,比如App的顶栏
本文就介绍一下ES6怎么写独立的模块的导出和导入。
- 详细内容:
我们先创建一个独立的js文件
/**
* Sample React Native App
* https://github.com/facebook/react-native
*/
import React, {
AppRegistry,
Component,
StyleSheet,
Text,
PixelRatio,
View,
} from 'react-native';
class Header extends Component {
/*
api自带渲染函数,重写该方法
*/
render() {
return (
<View style={styles.flex}>
<Text style= {styles.font}>
<Text style = {styles.font_1}>
网易
</Text>
<Text style = {styles.font_2}>
新闻
</Text>
<Text>
有态度°
</Text>
</Text>
</View>
);
}
}
//定义样式
const styles = StyleSheet.create({
flex:{
marginTop: 25,
height: 50,
borderBottomWidth: 3/React.PixelRatio.get(),
borderBottomColor: "#EF2D36",
alignItems: "center",
},
font:{
fontSize: 25,
fontWeight: "bold",
textAlign: "center",
},
font_1:{
color: "#CD1D1C",
},
font_2:{
color: "#FFF",
backgroundColor: "#CD1D1C",
},
});
/**
* 导出该类作为独立的模块
*/
export default class MyHeader extends Header {
}
此处最关键的就是
/**
* 导出该类作为独立的模块
*/
export default class MyHeader extends Header {
}
MyHeader是自己创建的类名称,导入的时候用到,这里extends继承的就是Header类;
到这里自定义的类导出写法就完成了。
接下来是介绍怎么导入抽出来的类写法:
/**
* Sample React Native App
* https://github.com/facebook/react-native
*/
import React, {
AppRegistry,
Component,
StyleSheet,
Text,
View,
} from 'react-native';
// import MyComponent from './MyComponent.js';
/**
* 导入自己写好的header类
*/
import MyHeader from './Header.js';
class TestProject extends Component{
/*
api自带渲染函数,重写该方法
*/
render() {
return (
<View style = {styles.flex}>
<MyHeader></MyHeader>
</View>
);
}
}
//定义样式
const styles = StyleSheet.create({
flex:{
flex: 1,
},
});
//注册项目
AppRegistry.registerComponent('TestProject', () => TestProject);
关键的就一句话:
import MyHeader from './Header.js';
这里的MyHeader就是前面导出类写到的,在这里用到,from表示从哪里加载这个定义好的文件。
到这里,就全部完成了独立抽象模块的导出和导入ES6写法。