显示类
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,
},
});
最后编辑于 :
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。