React-Native 基礎(四)使用style定義元件的樣式
阿新 • • 發佈:2019-02-03
- style是一個props
- style的鍵值命名格式遵循CSS風格,除了名字使用駝峰法則而不是使用分隔符。例如背景色:
backgoundColor
,不是background-color
- 可以傳遞style陣列,最後一個style有優先權,因而可以使用它繼承styles
- 為了元件的擴充套件性,在一個作用域中使用
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);