RN学习第四天:样式
对html了解的童鞋来说,样式并不陌生。所谓样式就是控制显示的颜色、位置、大小等等的属性。
在React Native中,你并不需要学习什么特殊的语法来定义样式。我们仍然是使用JavaScript来写样式。所有的核心组件都接受名为style的属性。这些样式名基本上是遵循了web上的CSS的命名,只是按照JS的语法要求使用了驼峰命名法,例如将background-color改为backgroundColor。
style属性可以是一个普通的JavaScript对象。这是最简单的用法,因而在示例代码中很常见。你还可以传入一个数组——在数组中位置居后的样式对象比居前的优先级更高,这样你可以间接实现样式的继承。
实际开发中组件的样式会越来越复杂,我们建议使用
StyleSheet.create 来集中定义组件的样式。新建RN项目的时候,都会默认有一个这样的样式表。
我们在这一节里要自己尝试写样式。对于熟悉html的童鞋们来说简直是手到擒来,但是不熟悉的童鞋也不用担心,我们可以一起学习。
首先还是要新建一个项目,我们取名为TestRN_style。注意,新建项目的命令。
注意版本号。
运行新建的项目:
运行没错的话,就会来到默认的欢迎页面。
下面,我们把项目默认的文字和样式都做一下更改。改成如下代码:
改完之后,点击模拟器,使得模拟器处于选中状态。
点击 hardware——shake Gerture
会弹出如下菜单:
点击reload,显示如下界面:
好了,我们来稍微解释下这里涉及到的样式。
bigblue样式
bigblue:{
color:'blue', //文字颜色为蓝色
fontSize:30, //文字大小为30
fontWeight:'bold',//文字样式为加粗
}
red样式
red:{
color:'red', //只是设置文字颜色为红色
}
下面我们再来解释下显示效果。
<Text style = {styles.red}>只是红色</Text>
这个使用单纯的red样式,把文字设置成红色。
<Text style = {styles.bigblue}>大大的蓝色</Text>
这个是使用bigblue样式设置了文字的颜色、大小和样式。
<Text style = {[styles.bigblue,styles.red]}>先蓝色,在红色</Text>
这里同时使用了两个样式,先使用了bigblue样式,设置了文字为蓝色,大小30,样式是粗体;后又使用了red样式,red样式中也定义了color属性,你可以理解为,这里又把文字变成了红色。所以最终显示出来的是两个样式的并集。
<Text style={[styles.red, styles.bigblue]}>先红色,再蓝色</Text>
这里先使用red样式把文字变成红色,然后又使用bigblue样式设置文字颜色为蓝色,大小为30,样式为加粗。所以最终显示出来的大大的蓝色的字体。
亲们,明白了吗?