写了这么多篇Android React Native的博文，基本上把复杂的东西都搞定了，接下来来看看一些轻松的东西，和布局有关，就是css样式，那么一个View可以设置哪些css样式呢，是和web中的css样式完全一样呢，还是有所不同呢？其实你只要在样式表中书写一个不存在的样式，就会报一大堆错，提示你该样式不存在，然后提供所有可用的样式给你，如图
下面的样式就是样式表中所有可用的属性。
"alignItems"@H_502_11@,"alignSelf"@H_502_11@,"backfaceVisibility"@H_502_11@,"backgroundColor"@H_502_11@,"borderBottomColor"@H_502_11@,"borderBottomLeftRadius"@H_502_11@,"borderBottomRightRadius"@H_502_11@,"borderBottomWidth"@H_502_11@,"borderColor"@H_502_11@,"borderLeftColor"@H_502_11@,"borderLeftWidth"@H_502_11@,"borderRadius"@H_502_11@,"borderRightColor"@H_502_11@,"borderRightWidth"@H_502_11@,"borderStyle"@H_502_11@,"borderTopColor"@H_502_11@,"borderTopLeftRadius"@H_502_11@,"borderTopRightRadius"@H_502_11@,"borderTopWidth"@H_502_11@,"borderWidth"@H_502_11@,"bottom"@H_502_11@,"color"@H_502_11@,"flex"@H_502_11@,"flexDirection"@H_502_11@,"flexWrap"@H_502_11@,"fontFamily"@H_502_11@,"fontSize"@H_502_11@,"fontStyle"@H_502_11@,"fontWeight"@H_502_11@,"height"@H_502_11@,"justifyContent"@H_502_11@,"left"@H_502_11@,"letterSpacing"@H_502_11@,"lineHeight"@H_502_11@,"margin"@H_502_11@,"marginBottom"@H_502_11@,"marginHorizontal"@H_502_11@,"marginLeft"@H_502_11@,"marginRight"@H_502_11@,"marginTop"@H_502_11@,"marginVertical"@H_502_11@,"opacity"@H_502_11@,"overflow"@H_502_11@,"padding"@H_502_11@,"paddingBottom"@H_502_11@,"paddingHorizontal"@H_502_11@,"paddingLeft"@H_502_11@,"paddingRight"@H_502_11@,"paddingTop"@H_502_11@,"paddingVertical"@H_502_11@,"position"@H_502_11@,"resizeMode"@H_502_11@,"right"@H_502_11@,"rotation"@H_502_11@,"scaleX"@H_502_11@,"scaleY"@H_502_11@,"shadowColor"@H_502_11@,"shadowOffset"@H_502_11@,"shadowOpacity"@H_502_11@,"shadowRadius"@H_502_11@,"textAlign"@H_502_11@,"textDecorationColor"@H_502_11@,"textDecorationLine"@H_502_11@,"textDecorationStyle"@H_502_11@,"tintColor"@H_502_11@,"top"@H_502_11@,"transform"@H_502_11@,"transformMatrix"@H_502_11@,"translateX"@H_502_11@,"translateY"@H_502_11@,"width"@H_502_11@,"writingDirection"@H_502_11@
接下来我们来一一解释一下。不过在这之前，我们还需要解释一下再React中，样式表的几种使用方法。
样式的声明
var@H_502_11@ styles = StyleSheet.create({
base@H_502_11@: {
width: 38@H_502_11@,height: 38@H_502_11@,background: {
backgroundColor: '#222222'@H_502_11@,active: {
borderWidth: 2@H_502_11@,borderColor: '#00ff00'@H_502_11@,});
使用样式
<Text@H_502_11@ style@H_502_11@={styles.base}@H_502_11@ />@H_502_11@
<View@H_502_11@ style@H_502_11@={styles.background}@H_502_11@ />@H_502_11@
也可以接收一个数组
<View@H_502_11@ style@H_502_11@={[styles.base,@H_502_11@ styles.background@H_502_11@]} />@H_502_11@
也可以根据条件来应用样式
4047d14" data-snippet-saved="false" data-codota-status="done"><View style={[styles.base@H_502_11@,this.state@H_502_11@.active@H_502_11@ && styles.active@H_502_11@]} />
假如this.state.active是true，styles.active就会被应用，如果为false，styles.active就不会被应用。
当然也是支持下面的这种写法
<View
style={[styles.base@H_502_11@,{
width: this.state@H_502_11@.width@H_502_11@,height: this.state@H_502_11@.width@H_502_11@ * this.state@H_502_11@.aspectRatio@H_502_11@
}]}
/>
接下来来讲讲样式表中的具体属性。
定位
定位分为相对定位和绝对定位，属性名为position，属性值为absolute和relative。
当使用绝对布局时，定位根据屏幕来进行。
var@H_502_11@ AwesomeProject = React.createClass({
render: function@H_502_11@()@H_502_11@ {@H_502_11@
return@H_502_11@ (
<View style={styles.container}>
<View style={styles.Box1}/>
<View style={styles.Box2}/>
<View style={styles.Box3}/>
<View style={styles.Box4}/>
</View>
);
},});
var@H_502_11@ styles = StyleSheet.create({
container:{
flex:1@H_502_11@,backgroundColor:'#ff0'@H_502_11@//黄色@H_502_11@
},Box1:{
width:50@H_502_11@,height:50@H_502_11@,backgroundColor:'#f00'@H_502_11@,//红色@H_502_11@
position :'absolute'@H_502_11@,left:30@H_502_11@,//左边距离屏幕左侧30单位@H_502_11@
},Box2:{
width:50@H_502_11@,backgroundColor:'#0f0'@H_502_11@,//绿色@H_502_11@
position :'absolute'@H_502_11@,top:30@H_502_11@,//上边距离屏幕上侧30单位@H_502_11@
},Box3:{
width:50@H_502_11@,backgroundColor:'#f0f'@H_502_11@,//紫色@H_502_11@
position :'absolute'@H_502_11@,right:30@H_502_11@,//右边距离屏幕右侧30单位@H_502_11@
},Box4:{
width:50@H_502_11@,backgroundColor:'#00f'@H_502_11@,//蓝色@H_502_11@
position :'absolute'@H_502_11@,bottom:30@H_502_11@//下边距离屏幕下侧30单位@H_502_11@
}
});
效果图如下。
当对应的值为负数时，方向与原方向相反，即如果top为-50，则会整个移出到屏幕外（向上移到50个单位）。
那么相对布局又是怎么样的呢
var@H_502_11@ AwesomeProject = React.createClass({
render: function@H_502_11@()@H_502_11@ {@H_502_11@
return@H_502_11@ (
<View style={styles.container}>
<View style={styles.Box1}/>
</View>
);
},//红色@H_502_11@
position :'relative'@H_502_11@,});
效果图
可以看到设置了top和left后，相对于不使用定位的位置向右向下移动了30单位，如果值为负数，也是往相反的方向移到。
但是如果设置了right和bottom后，又会怎么样呢
var@H_502_11@ styles = StyleSheet.create({
container:{
flex:1@H_502_11@,bottom:30@H_502_11@,});
其实它的效果就是对应的top和left为负值的情况。距离原来位置的右侧30单位，距离原来位置下侧30单位，即向上向左平移30单位。原来位置就是不使用定位时的位置。如图
默认情况下使用的是相对定位
边框宽度
borderBottomWidth //底部边框宽度@H_502_11@
borderLeftWidth //左边边框宽度@H_502_11@
borderRightWidth //右边边框宽度@H_502_11@
borderTopWidth //顶部边框宽度@H_502_11@
borderWidth //所有边框宽度@H_502_11@
你可以使用设置所有边框的宽度，也可以设置指定某条边的宽度。
边框颜色
borderBottomColor borderLeftColor borderRightColor borderTopColor borderColor
外边距
marginBottom
marginLeft
marginRight
marginTop
marginVertical
marginHorizontal
margin@H_502_11@
值得注意的是marginVertical相当于同时设置marginTop和marginBottom，marginHorizontal相当于同时设置marginLeft和marginRight，margin相当于同时设置四个
内边距
paddingBottom
paddingLeft
paddingRight
paddingTop
paddingVertical
paddingHorizontal
padding@H_502_11@
背景色
背景色，属性值为字符串类型的rgb表示方式
backgroundColor
边框圆角
borderTopLeftRadius borderTopRightRadius borderBottomLeftRadius borderBottomRightRadius borderRadius
宽高
width@H_502_11@
height@H_502_11@
Flex布局相关
相关内容见Flex 布局教程：语法篇和Flex 布局教程：实例篇，个人觉得写得很清晰
flex@H_502_11@ number
flexDirection enum('row'@H_502_11@,'column'@H_502_11@)@H_502_11@
flexWrap enum('wrap'@H_502_11@,'nowrap'@H_502_11@)@H_502_11@
alignItems enum('flex-start'@H_502_11@,'flex-end'@H_502_11@,'center'@H_502_11@,'stretch'@H_502_11@)@H_502_11@
alignSelf enum('auto'@H_502_11@,'flex-start'@H_502_11@,'stretch'@H_502_11@)@H_502_11@
justifyContent enum('flex-start'@H_502_11@,'space-between'@H_502_11@,'space-around'@H_502_11@)@H_502_11@
字体相关属性
color@H_502_11@ 字体颜色
fontFamily 字体族
fontSize 字体大小
fontStyle 字体样式，正常，倾斜等，值为enum('normal'@H_502_11@,'italic'@H_502_11@)@H_502_11@
fontWeight 字体粗细，值为enum("normal"@H_502_11@,'bold'@H_502_11@,'100'@H_502_11@,'200'@H_502_11@,'300'@H_502_11@,'400'@H_502_11@,'500'@H_502_11@,'600'@H_502_11@,'700'@H_502_11@,'800'@H_502_11@,'900'@H_502_11@)@H_502_11@
letterSpacing 字符间隔
lineHeight 行高
textAlign 字体对齐方式，值为enum("auto"@H_502_11@,'left'@H_502_11@,'right'@H_502_11@,'justify'@H_502_11@)@H_502_11@
textDecorationLine 貌似没效果，字体修饰，上划线，下划线，删除线，无修饰，值为enum("none"@H_502_11@,'underline'@H_502_11@,'line-through'@H_502_11@,'underline line-through'@H_502_11@)@H_502_11@
textDecorationStyle enum("solid"@H_502_11@,'double'@H_502_11@,'dotted'@H_502_11@,'dashed'@H_502_11@)@H_502_11@ 貌似没效果，修饰的线的类型
textDecorationColor 貌似没效果，修饰的线的颜色
writingDirection enum("auto"@H_502_11@,'ltr'@H_502_11@,'rtl'@H_502_11@)@H_502_11@ 不知道什么属性，写作方向？从左到右？从右到左？
图片相关属性
resizeMode enum('cover'@H_502_11@,'contain'@H_502_11@,'stretch'@H_502_11@)@H_502_11@
overflow@H_502_11@ enum('visible'@H_502_11@,'hidden'@H_502_11@)@H_502_11@ 超出部分是否显示，hidden@H_502_11@为隐藏
tintColor 着色，rgb字符串类型
opacity@H_502_11@ 透明度
其中resizeMode 中的三个属性，contain是指无论如何图片都包含在指定区域内，假设设置的宽度高度比图片大，则图片居中显示，否则，图片等比缩小显示
测试代码如下
var AwesomeProject = React.createClass({ render: function() { return ( <View@H_502_11@ style@H_502_11@={styles.container}@H_502_11@>@H_502_11@ <Image@H_502_11@ source@H_502_11@=@H_502_11@@H_502_11@{{uri@H_502_11@:'https@H_502_11@://ss@H_502_11@0.bdstatic.com@H_502_11@/5aV@H_502_11@1bjqh@H_502_11@_Q@H_502_11@23odCf@H_502_11@/static@H_502_11@/superman@H_502_11@/img@H_502_11@/logo@H_502_11@/bd@H_502_11@_logo@H_502_11@1_31bdc@H_502_11@765.png@H_502_11@'}}@H_502_11@ style@H_502_11@={styles.img}@H_502_11@>@H_502_11@</Image@H_502_11@>@H_502_11@ </View@H_502_11@>@H_502_11@ ); },}); var styles = StyleSheet.create({ container:{ backgroundColor:'#ff0'//黄色 },img:{ flex:1,height:150,resizeMode:"contain" },}); @H_502_11@
将高度改成50，则进行缩小
cover是指按实际大小进行显示，超出部分进行裁剪，将属性值改成cover之后的效果图如下
stretch是指将图像进行拉伸显示，将属性值改为stretch后的效果如下图所示
图像变换
scaleX:@H_502_11@水平方向缩放
scaleY:@H_502_11@垂直方向缩放
rotation:@H_502_11@旋转
translateX:@H_502_11@水平方向平移
translateY:@H_502_11@水平方向平移
阴影
shadowColor shadowOffset shadowOpacity shadowRadius
