React-Native es6继承页面方法

很多用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 (  
         
            
            { this.fullName() }  
            
         
    );  
  }  
}  
  
const styles = StyleSheet.create({  
  welcome: {  
    fontSize: 20,  
    textAlign: 'center',  
    margin: 10,  
  },  
});  


最终读取父类的方法

你可能感兴趣的:(React-Native es6继承页面方法)