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 (  
       <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,  
  },  
});  


最终读取父类的方法
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容