对html了解的童鞋来说,样式并不陌生。所谓样式就是控制显示的颜色、位置、大小等等的属性。
在React Native中,你并不需要学习什么特殊的语法来定义样式。我们仍然是使用JavaScript来写样式。所有的核心组件都接受名为style的属性。这些样式名基本上是遵循了web上的CSS的命名,只是按照JS的语法要求使用了驼峰命名法,例如将background-color改为backgroundColor。
style属性可以是一个普通的JavaScript对象。这是最简单的用法,因而在示例代码中很常见。你还可以传入一个数组——在数组中位置居后的样式对象比居前的优先级更高,这样你可以间接实现样式的继承。
实际开发中组件的样式会越来越复杂,我们建议使用
StyleSheet.create 来集中定义组件的样式。新建RN项目的时候,都会默认有一个这样的样式表。
![img_2b87178a68a3d639d10aec7804d4d052.png](https://i-blog.csdnimg.cn/blog_migrate/9b74927bafc6cbdddb85db960d181135.png)
我们在这一节里要自己尝试写样式。对于熟悉html的童鞋们来说简直是手到擒来,但是不熟悉的童鞋也不用担心,我们可以一起学习。
首先还是要新建一个项目,我们取名为TestRN_style。注意,新建项目的命令。
![img_cbead6cf89fbd0944bbf014640be7e5f.png](https://i-blog.csdnimg.cn/blog_migrate/74216418524072307a2e500b79658d16.png)
注意版本号。
运行新建的项目:
![img_0d4cfed29ddd4af7bace0657e4c77a77.png](https://i-blog.csdnimg.cn/blog_migrate/6b31a60a930b05765388ad14e8d0377b.png)
运行没错的话,就会来到默认的欢迎页面。
下面,我们把项目默认的文字和样式都做一下更改。改成如下代码:
![img_c202bcfc8a990b26bd392474f244a661.png](https://i-blog.csdnimg.cn/blog_migrate/7dca85177e67713879946d984c3fa770.png)
![img_e950dd7aa60d53b839bdbd465a73dc5e.png](https://i-blog.csdnimg.cn/blog_migrate/c2b77fa930aeff07ce90d7e8a3566019.png)
改完之后,点击模拟器,使得模拟器处于选中状态。
点击 hardware——shake Gerture
![img_597ce939da75c02a181d3193d2c16fce.png](https://i-blog.csdnimg.cn/blog_migrate/b8d833a74a8164fb2e4b2a0ea6ea82e3.png)
会弹出如下菜单:
![img_b2d0464b9fa97f62808273b3b1a5d2f9.png](https://i-blog.csdnimg.cn/blog_migrate/3f60a1d6e6e9656f4669709616587d6d.png)
点击reload,显示如下界面:
![img_551e4bfa5f9b11c4ad1c7858fcfe485f.png](https://i-blog.csdnimg.cn/blog_migrate/5927be01fc5477029660b8ff28c1f7c4.png)
好了,我们来稍微解释下这里涉及到的样式。
![img_584785d60928e70aa031e96f3722e669.png](https://i-blog.csdnimg.cn/blog_migrate/0f7bc9c2349c5021490341c90529e873.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,样式为加粗。所以最终显示出来的大大的蓝色的字体。
亲们,明白了吗?