樣式
所有的核心組件都接受名為style的屬性
基本遵循Web的CSS命名，不過因為在JS中所以要求以駝峰法命名雪营。
數(shù)組中靠后的樣式優(yōu)先級更高
一般使用 StyleSheet.create 集中定義組件樣式
import React, { Component } from 'react';
import { AppRegistry, StyleSheet, Text, View } from 'react-native';
class SomeStyles extends Component{
render(){
return (
<View>
<Text style={styles.red}> red</Text>
<Text style={[styles.bigblue, styles.red]}>bigblue, then red</Text>
</View>
);}
}
const styles = StyleSheet.create({
bigblue : {
color: 'blue',
fontWeight: 'bold',
fontSize: 30,
},
red: {
color: 'red',
},
});
AppRegistry.registerComponent('SomeStyles ', () => SomeStyles );
高度與寬度
組件的高寬決定屏幕顯示尺寸弓千。
1.指定寬高
2.彈性寬高
指定寬高
即width和height。
尺寸是無單位的献起，指代像素邏輯點洋访。
class FixedWidthAndHeight extends Component{
render(){
return (
<View>
<View style={{width: 50, height: 50, backgroundColor: 'bigblue '}} />
<View style={{width: 100, height: 100, backgroundColor: 'red'}} />
</View>
);
}
}//一般用于不同尺寸的屏幕上都顯示成一樣的大小镣陕。
彈性寬高
即通過設置比例動態(tài)擴張或收縮。
沒有固定的width和height姻政，也沒有設定flex呆抑。即尺寸為0。
父容器的尺寸不可為0汁展，否則無法顯示鹊碍。
class FlexWidthAndHeight extends Component{
render(){
return (
<View style={{flex: 1}}>
<View style={{flex: 1, backgroundColor: 'bigblue'}} />
<View style={{flex: 3, backgroundColor: 'red'}} />
<View style={{flex: 1, backgroundColor: 'bigblue'}} />
</View>
);
}
}