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-继承

    显示类 父类 子类

  • react-native-update-mutlirn RN热更

    一、RN-安装 react-native-update-mutlirn npm install react-nat...

  • 2019-01-15 RN仿微信朋友圈

    1.下载本示例 github 地址https://github.com/anzipeng/-RN-,喜欢就点个赞吧...

  • RN-可拖动的悬浮按钮

    RN-可拖动的悬浮按钮 需求 分享悬浮按钮,需要展示在特定页面,并且支持拖动(防止遮挡页面内容) 解决方案思路 1...

  • RN-封装

    本文内容通过代码来描述封装的思想(本人理解的封装) 封装嘛 1、能不给你看的,坚决不给你看2、必须要给你看的,让你...

  • RN-笔记

    创建指定RN版本的工程 倒计时 (系统自带的) 按钮 Switch的状态切换 ScrollView的吸顶效果 遍历...

  • React-Native-Navigator导航条(一)

    搞了一天的RN-导航条了,终于有点成就,特来记录一下 整体项目目录如下 HomePage.js 首先是创建navi...

  • RN-地图导航

    调起百度网页地图路径导航 调起高德网页地图路径导航 iOS调起百度APP地图路径导航 iOS调起高德app地图路径...

  • RN-学习笔记

    1. react-native-swiper 轮播组件 参考http://www.jianshu.com/p/4d...

  • RN-索引列表

    github : https://github.com/rgovindji/react-native-atoz-l...

网友评论

    本文标题:RN-继承

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