1. 程式人生 > >React-Native 基礎(四)使用style定義元件的樣式

React-Native 基礎(四)使用style定義元件的樣式

  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 ( <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);