3.4 Inheritance

1.pass styles as props

1. class InheritanceStyle extends Component {
2. render() {
3. return (
4. <View style={this.props.parentColor}>
5. </View>
6. );
7. }
8. }

10. class Main extends Component {
11. handleReady(str){
12. console.log(str);
13. }
14. render() {
15. return (
16. <View style={styles.container}>
17. <InheritanceStyle parentColor={styles.blue}/>
18. </View>
19. );
20. }
21. }
22. const styles = StyleSheet.create({
23. container: {
24. flex: 1
25. },
26. blue: {
27. flex: 1,
28. backgroundColor: 'blue'
29. }
30. });

2.concatenation styles

BaseStyles.js

1. import { StyleSheet,Dimensions } from 'react-native';
2. let winSize = Dimensions.get('window');
3. const BaseStyles = StyleSheet.create({
4. text: {
5. fontSize: 40/winSize.scale
6. }
7. });
8. export default BaseStyles;

1. import BaseStyles from './BaseStyles';

3. class InheritanceStyle extends Component {
4. render() {
5. return (
6. <View style={this.props.parentColor}>
7. <Text style={[BaseStyles.text, styles.text]}> this is a long text </Text>
8. </View>
9. );
10. }
11. }
12. const styles = StyleSheet.create({
13. text:{
14. color: '#ffffff'
15. }
16. });

原文: <https://unbug.gitbooks.io/react-native-training/content/34_inheritance.html>