React-Native es6继承页面方法

2017-08-15  本文已影响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,  
  },  
});  


最终读取父类的方法
上一篇下一篇

猜你喜欢

热点阅读