RN学习第四天:样式

对html了解的童鞋来说,样式并不陌生。所谓样式就是控制显示的颜色、位置、大小等等的属性。
在React Native中,你并不需要学习什么特殊的语法来定义样式。我们仍然是使用JavaScript来写样式。所有的核心组件都接受名为style的属性。这些样式名基本上是遵循了web上的CSS的命名,只是按照JS的语法要求使用了驼峰命名法,例如将background-color改为backgroundColor。

style属性可以是一个普通的JavaScript对象。这是最简单的用法,因而在示例代码中很常见。你还可以传入一个数组——在数组中位置居后的样式对象比居前的优先级更高,这样你可以间接实现样式的继承。

实际开发中组件的样式会越来越复杂,我们建议使用
StyleSheet.create 来集中定义组件的样式。新建RN项目的时候,都会默认有一个这样的样式表。

RN学习第四天:样式
image.png

我们在这一节里要自己尝试写样式。对于熟悉html的童鞋们来说简直是手到擒来,但是不熟悉的童鞋也不用担心,我们可以一起学习。
首先还是要新建一个项目,我们取名为TestRN_style。注意,新建项目的命令。

RN学习第四天:样式
image.png

注意版本号。

运行新建的项目:


RN学习第四天:样式
image.png

运行没错的话,就会来到默认的欢迎页面。
下面,我们把项目默认的文字和样式都做一下更改。改成如下代码:

RN学习第四天:样式
image.png
RN学习第四天:样式
image.png

改完之后,点击模拟器,使得模拟器处于选中状态。
点击 hardware——shake Gerture


RN学习第四天:样式
image.png

会弹出如下菜单:

RN学习第四天:样式
image.png

点击reload,显示如下界面:

RN学习第四天:样式
image.png

好了,我们来稍微解释下这里涉及到的样式。

RN学习第四天:样式
image.png

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,样式为加粗。所以最终显示出来的大大的蓝色的字体。

亲们,明白了吗?