样式
所有的核心组件都接受名为style的属性
基本遵循Web的CSS命名，不过因为在JS中所以要求以驼峰法命名。
数组中靠后的样式优先级更高
一般使用 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>
);
}
}//一般用于不同尺寸的屏幕上都显示成一样的大小。
弹性宽高
即通过设置比例动态扩张或收缩。
没有固定的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>
);
}
}