很多用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,},});
最终读取父类的方法