React Native 之 Style

---

在RN中,你不需要使用一个特殊的语言或语法定义样式style。你只需要使用JavaScript定义你的应用程序风格。所有的核心组件接受指定样式style。在网站上样式名称和值通常匹配CSS是如何工作的,除了名字的书写，像backgroundColor而不是像background-color。

style prop可以是一个普通的JavaScript对象。这是最简单的,我们通常使用示例代码的地方。您还可以通过一系列的风格styles ——数组中最后一个样式优先,因此您可以使用它来继承样式。

随着一个组件的复杂性,经常清洁使用样式表。在一个地方创建定义多个样式。下面一个例子:

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

class LotsOfStyles extends Component {
  render() {
    return (
      <View>
        <Text style={styles.red}>just red</Text>
        <Text style={styles.bigblue}>just bigblue</Text>
        <Text style={[styles.bigblue, styles.red]}>bigblue, then red</Text>
        <Text style={[styles.red, styles.bigblue]}>red, then bigblue</Text>
      </View>
    );
  }
}

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

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

一个常见的模式是让您的组件接受style prop，反过来也可以用于子组件。在CSS的中、你可以使用这个风格“级联”。

有很多方法来定制文本样式。查看Text component reference 全部列表。

现在你可以让你的文字很漂亮。下一步在成为一个风格大师,要学会如何控制组件的大小。

---

关注公众号：

                       

                                              更多精彩文章等你来！！！

---

[1]:参考文献 http://facebook.github.io/react-native/docs/style.html