React Native导入独立模块ES6写法

• 概述：

开发的过程中，有很多需要抽象出来可以拿来公用的模块，比如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写法。