学习React Native时,总是会将样式的设置和JavaScript的样式设置混淆。特地总结一下使用上的问题并将其与CSS样式进行对比。
React Native中文网上明确说React Native的样式就是JavaScript的样式,只是按照JS的语法使用了驼峰命名法。而且推荐使用StyleSheet.create的方式来创建样式。看看这些常用样式的做法:
<Text style={styles.bigblue}>just bigblue</Text>
<Text style={[styles.bigblue, styles.red]}>bigblue, then red</Text>
而styles的定义是这样的:
const styles = StyleSheet.create({
bigblue: {
color: 'blue',
fontWeight: 'bold',
fontSize: 30,
},
red: {
color: 'red',
},
});
上面使用样式的过程中,通过数组设置多个样式,靠后的样式对象具有更高的优先级,也就是说后面的样式可能覆盖前面的样式。下面的文字显示为蓝色:
<Text style={[styles.red, styles.bigblue]}>红色会被蓝色覆盖</Text>
上面的的使用是style={[styles.bigblue, styles.red]},这里的styles.bigblue和styles.red都是定义过的样式,还可以在其中再添加普通样式(需要用大括号括起来):
<View style={[styles.bigblue, styles.red, { marginTop: 20 }]}>
上面创建样式再引用来添加样式的方法是最常用的方法。还有更为简单的内联样式.
内联样式style={{, , , , , }} ,在两个大括号中间各个属性用多好分开:
<Text style={{color:'red', fontSize:30}}> 内联样式的Text</Text>
关于React Native的样式的使用大概就是注意上面这些了,下面对比一下
JS中的样式的设置。
对比JavaScript的样式
JavaScript的外联样式在CSS文件中通过元素选择器,属性选择器,类选择器等将选取的元素设置成指定样式:
CSS文件:
table {
height: 400px;
margin: 15px auto 15px;
}
#startButton,#freshButton {
width: 150px;
height: 35px;
}
td {
width: 120px;
height: 70px;
text-align: center;
background: rgba(160, 80, 10, 0.8);
}
可以看到,CSS的外联样式中,多个指定元素,类选择器等选择元素之间是不需要分隔符号的。每个选择器跟随一个大括号来设置样式。
而在React Native中,也是一个大括号完成样式设置,大括号前有一个冒号,创建的多个样式之间,是需要逗号来分开的。并且,在单个样式中的各个属性值是逗号分割,而CSS中是分号分割。
JavaScript的内联样式:
<div style="font-size:18px;
height:100px;
width:20px;
background-color:red;
">
直接在style=” … ; …. ; … ;” 在引号中写上属性和属性值。用分号分隔。
CSS的内联样式中,style=“ ;;”,大括号中直接写属性和属性值,并用分号分隔。而在React Native的内联样式中,style={{ , ,}} 定义属性和属性值用逗号分隔。
React Native中为了避免属性写错而没有报错信息,需要尽量将属性写到创建表中,也就是使用外联样式。
可参见博客: http://blog.csdn.net/dingxiaowei2013/article/details/54142488