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

3.4 Inheritance - 图1

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