RN学习第四天：样式

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

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

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

image.png

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

image.png

注意版本号。

运行新建的项目：

image.png

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

image.png

image.png

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

image.png

会弹出如下菜单：

image.png

点击reload，显示如下界面：

image.png

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

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

亲们，明白了吗？