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: ,
  },
  red: {
    color: 'red',
  },
});

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

一個常見的模式是讓您的元件接受style prop，反過來也可以用于子元件。在CSS的中、你可以使用這個風格“級聯”。

有很多方法來定制文本樣式。檢視Text component reference 全部清單。

現在你可以讓你的文字很漂亮。下一步在成為一個風格大師,要學會如何控制元件的大小。

關注公衆号：

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

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