React Native导入独立模块ES6写法

前端之家收集整理的这篇文章主要介绍了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,} 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写法。
原文链接:https://www.f2er.com/react/306912.html

猜你在找的React相关文章