样式
- 所有核心组件都接受
style属性，建议使用StyleSheet.create来集中定义组件的样式； - style中可以传入单一的样式，也可以传入样式数组，与css中的规则一样，同一样式对象 处于后面的样式优先级更高 会覆盖前面的样式；
- 样式名基本上遵循了web上的
css的命名，但按照JS的语法要求使用了驼峰命名，如css中的background-color 改为backgroundColor；
import React, {Component} from 'react';
import {StyleSheet, Text, View} from 'react-native';
const styles = StyleSheet.create({
bigBlue:{
color:'blue',
fontWeight:"700",
fontSize:60,
},
red:{
color:"#f60",
fontSize:30,
}
});
export default class BlinkApp extends Component {
render(){
return (
<View>
<Text style={styles.bigBlue}>just blue</Text>
<Text style={[styles.bigBlue, styles.red]}>blue then red</Text>
<Text style={[styles.red, styles.bigBlue]}>red then blue</Text>
</View>
);
}
}
颜色、字号的简单样式
高度与宽度
const styles = StyleSheet.create({
textAlignCenter:{
alignItems:'center'
},
greyBackground:{
backgroundColor: '#f3F3F3'
},
greenBackground:{
backgroundColor: '#00e789',
},
sHeight100:{
height:100, // 指定宽高
}
});
<View style={{flex:1}}> // 弹性宽高， 方向的指定与css中一致 flexDirection:column|row
<View style={[{flex:1,styles.textAlignCenter, styles.greyBackground}]}</View>
<View style={[styles.sHeight100, styles.textAlignCenter, styles.greenBackground}]}</View>
</View>
使用Flexbox布局
-
flexDirection—— Flex Directioncolumn(default)|row
决定布局的主轴是垂直方向（默认垂直方向）还是水平方向 -
alignItems—— Layout Directionstretch(default) | center| flex-start | flex-end | baseline
定义flex子项在flex容器的侧轴（与主轴方向垂直，对RN来说是水平方向）方向上的对齐方式 -
justifyContent—— Justify Contentflext-start | flext-end | center |space-between | space-around | space-evenly
用于设置或检索弹性盒子元素在主轴方向（对RN来说是垂直方向）上的对齐方式。
render(){
return (
<View style={{flex:1, flexDirection:'column'}}>
<Text style={{height:30}}>flex-start↓</Text>
<View style={{flex:1, flexDirection:'row', justifyContent:'flex-start', textAlign:'center'}}>
<View style={{width:70, height:70, backgroundColor:'coral'}}></View>
<View style={{width:70, height:70, backgroundColor:'lightblue'}}></View>
<View style={{width:70, height:70, backgroundColor:'khaki'}}></View>
<View style={{width:70, height:70, backgroundColor:'pink'}}></View>
</View>
<Text style={{height:30}}>flex-end↓</Text>
<View style={{flex:1, flexDirection:'row', justifyContent:'flex-end'}}>
<View style={{width:70, height:70, backgroundColor:'coral'}}></View>
<View style={{width:70, height:70, backgroundColor:'lightblue'}}></View>
<View style={{width:70, height:70, backgroundColor:'khaki'}}></View>
<View style={{width:70, height:70, backgroundColor:'pink'}}></View>
</View>
<Text style={{height:30}}>center↓</Text>
<View style={{flex:1, flexDirection:'row', justifyContent:'center'}}>
<View style={{width:70, height:70, backgroundColor:'coral'}}></View>
<View style={{width:70, height:70, backgroundColor:'lightblue'}}></View>
<View style={{width:70, height:70, backgroundColor:'khaki'}}></View>
<View style={{width:70, height:70, backgroundColor:'pink'}}></View>
</View>
<Text style={{height:30}}>space-between↓</Text>
<View style={{flex:1, flexDirection:'row', justifyContent:'space-between'}}>
<View style={{width:70, height:70, backgroundColor:'coral'}}></View>
<View style={{width:70, height:70, backgroundColor:'lightblue'}}></View>
<View style={{width:70, height:70, backgroundColor:'khaki'}}></View>
<View style={{width:70, height:70, backgroundColor:'pink'}}></View>
</View>
<Text style={{height:30}}>space-around↓</Text>
<View style={{flex:1, flexDirection:'row', justifyContent:'space-around'}}>
<View style={{width:70, height:70, backgroundColor:'coral'}}></View>
<View style={{width:70, height:70, backgroundColor:'lightblue'}}></View>
<View style={{width:70, height:70, backgroundColor:'khaki'}}></View>
<View style={{width:70, height:70, backgroundColor:'pink'}}></View>
</View>
</View>
);
}
justifyContent效果图
