React-Native 基础(四)使用style定义组件的样式

参考文档:http://facebook.github.io/react-native/docs/style.html

  1. style是一个props
  2. style的键值命名格式遵循CSS风格,除了名字使用驼峰法则而不是使用分隔符。例如背景色:backgoundColor,不是background-color
  3. 可以传递style数组,最后一个style有优先权,因而可以使用它继承styles
  4. 为了组件的扩展性,在一个作用域中使用StyleSheet.create定义多个style通常更加明晰。

实例如下:

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

class LotsOfStyles extends Component {
  render() {
    return (
      
        just red
        just bigblue
        bigblue, then red
        red, then bigblue
      
    );
  }
}

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

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

你可能感兴趣的:(RN基础)