React Native学习（4）样式

React Native学习（4）样式

在React Native中的样式仍然是使用 JavaScript 来写。
如：

/**
 * 慢慢学习
 * https://blog.csdn.net/quanhaoH
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image
} from 'react-native';

export default class MyApp extends Component {
  render() {
	  return (
      <View>
        <Text style={styles.red}>red</Text>
        <Text style={styles.bigBlue}>bigBlue</Text>
        <Text style={styles.black}>black</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  bigBlue: {
    color: 'blue',
    fontWeight: 'bold',
    fontSize: 30,
  },
  red: {
    color: 'red',
  },
  black: {
	  color: 'black',
	  fontSize: 40,
  },
});

AppRegistry.registerComponent('MyApp', () => MyApp);

常见的做法是按顺序声明和使用style属性，以借鉴 CSS 中的“层叠”做法（即后声明的属性会覆盖先声明的同名属性）。