美文网首页
React-Native es6继承页面方法

React-Native es6继承页面方法

作者: 以德扶人 | 来源:发表于2017-08-15 17:36 被阅读411次

很多用React Native的同学都是前端工程师,在传统的js没有继承的概念。但是在react Native所支持的es6是有继承的,效果也是不错的,分享给大家。
首先定义一个BaseComponent,例如有一个fullName的方法

import React, { Component } from 'react';  
  
  
export default class BaseComponent extends Component {    
  constructor(props) {  
    super(props);  
  }  
  
  fullName() {  
    return 'test'  
  }  
} 

定义一个类,运行的时候,动态读取父类的方法

import React, { Component } from 'react';  
import {  
  AppRegistry,  
  StyleSheet,  
  Text,  
  View  
} from 'react-native';  
  
import BaseComponent from './BaseComponent';  
  
  
export default class PageComponent extends BaseComponent {  
    
  
  render() {  
    return (  
       <View style={{flex: 1,paddingTop: 50,}}>  
          <Text style={styles.welcome}>  
            { this.fullName() }  
          </Text>  
       </View>  
    );  
  }  
}  
  
const styles = StyleSheet.create({  
  welcome: {  
    fontSize: 20,  
    textAlign: 'center',  
    margin: 10,  
  },  
});  


最终读取父类的方法

相关文章

  • React-Native es6继承页面方法

    很多用React Native的同学都是前端工程师,在传统的js没有继承的概念。但是在react Native所支...

  • React-Native中类的继承和model的继承

    1.类的继承(ES6)   其实,在React-Native开发中时常会遇到一些方法重复的写,想像Java一样解耦...

  • es5 es6静态方法、类、单例模式

    es5中的类和静态方法 es5继承 es6中的类 es6里面的继承 es6里面的静态方法 es6单例模式 转载:h...

  • ES的类与继承

    ES5中的类与继承 构造函数继承,原型继承,组合式继承 静态方法,静态属性,实例方法,实例属性 ES6中的类与继承...

  • JS中类的继承封装和多态

    子类继承父类的属性和方法(原生继承,call继承,寄生组合继承,ES6中class类继承)原生继承:让子类的原型指...

  • JavaScript ES6 class多重继承实践与总结

    ES6中,class原生是不支持多重继承的,根据阮一峰ES6参考资料中的方法,通过以下方式即可实现class继承多...

  • JS 继承的两种写法

    ES5 ES6 两种方法都能实现继承,本质上ES6继承是ES5继承的语法糖,会更简单些,但是假如要添加一个非函数的...

  • ES5、ES6继承

    ES5、ES6继承方式 继承的目标: 父类公有属性和方法为子类公有属性和方法父类私有属性和方法为子类私有属性和方法...

  • 手写实现继承

    这里就只实现两种方法了,ES6之前的寄生组合式继承 和 ES6之后的class继承方式。 补充一个小知识, ES6...

  • 面向对象类

    类与实例 类的声明 ES5 ES6 生成实例 类与继承 如何实现继承 继承的几种方式 原型链是实现继承的主要方法 ...

网友评论

      本文标题: React-Native es6继承页面方法

      本文链接:https://www.haomeiwen.com/subject/yoevrxtx.html