RN-继承

作者: 精神病患者link常 | 来源:发表于2017-08-28 18:40 被阅读283次

    显示类

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

    相关文章

      网友评论

        本文标题:RN-继承

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