美文网首页
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继承页面方法

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