RN-继承

显示类

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View
} from 'react-native';

import ChildComponent from './childCompontent';


export default class extentsTest extends Component {
    render() {
        return (
            

                // 要显示的子类
                

            
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'red',
    },

});

AppRegistry.registerComponent('RNProjectTestApp', () => extentsTest);

父类

/**
 * Created by mymac on 2017/8/28.
 */
/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View
} from 'react-native';

export default class baseComponent extends Component {

// 父类声明一个方法
    fatherAction(){
        console.log('fatherAction');
    }

// 父类声明一个方法，返回一个组件
 showView(text){
        return (
            
                {text}
            
        )
    }
}

子类

/**
 * Created by mymac on 2017/8/28.
 */
/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    TouchableOpacity,
} from 'react-native';

// 父类
import FatherComponent from './baseComponent';

// 继承与父类
export default class childCompontent extends FatherComponent {

    /*重写父类的方法*/
    fatherAction(){
        console.log('childAction');
    }

    render() {
        return (
            
                {
                    this.fatherAction(); // 调用父类的方法，可以重写父类的方法
                }}>
                    
                        Welcome to React Native!
                    
                
              
                // 调用父类的方法
                {this.showView('调用父类的方法，返回一个组件')}


            
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'yellow',

    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
});