RN知识

RN-继承

2017-08-28  本文已影响283人  精神病患者link常

显示类


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 (
            <View style={styles.container}>

                // 要显示的子类
                <ChildComponent/>

            </View>
        );
    }
}

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 (
            <View>
                <Text>{text}</Text>
            </View>
        )
    }
}

子类

/**
 * 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 (
            <View style={styles.container}>
                <TouchableOpacity onPress={()=>{
                    this.fatherAction(); // 调用父类的方法,可以重写父类的方法
                }}>
                    <Text style={styles.welcome}>
                        Welcome to React Native!
                    </Text>
                </TouchableOpacity>
              
                // 调用父类的方法
                {this.showView('调用父类的方法,返回一个组件')}


            </View>
        );
    }
}

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

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


上一篇下一篇

猜你喜欢

热点阅读