用户登录

在 React 元素上添加样式,可以在这个元素的上面添加一个 style 属性 .. 然后去设置一下想要使用的样式,注意应用的样式其实是 JavaScript ,并不是真正的 CSS 。 因为要显示的东西并不是在浏览器的里面。

最简单的应用样式的方法就是使用行内的样式,输入一些大括号 .. 再给它一个对象 … 然后是要使用的样式 .. 比如我们去设置一下这个容器的背景颜色 .. 可以使用一个 backgroundColor .. 注意这个样式的属性跟平时用的 CSS 样式的属性不太一样 .. 你可以把它想成是 React 版本的样式属性 …

它的值是一个字符串,所以要添加一组引号 … 设置成 #eae7ff … 逗号分隔一下 … 再给它一个 height 属性设置一下高度 .. 它的值是一个数字,所以不需要引号 … 设置成 300 ..

保存 … 在模拟器上你会看到一个高是 300 ,浅紫色背景的一个容器 .. 如果你让这个容器占满整个屏幕 .. 可以先去掉这个 height 属性 .. 然后再用一个 flex 属性 … 它的值设置成 1 …

一般我们要使用的样式可以使用 StyleSheet 的 create 方法去创建 .. 在这个组件的下面 .. 添加一个变量 .. 名字是 styles .. 让它等于 StyleSheet.create 这个方法 .. 给它一个对象参数 … 这个对象里的项目就是定义的一些样式,每组样式又是一个对象 ..

比如先添加一个叫 container 的样式 .. 它的值是一个对象 .. 在这个对象里是具体的样式 .. 用一个 backgroundColor 属性 .. 设置一下它的值 … 逗号分隔一下 ... 再添加一个 flex 属性 .. 它的值设置成 1 …

然后在这个 View 元素里面 .. 先去掉 style 属性的值 .. 给它一下 styles.container … 这样这个 View 元素就会使用 styles 的,用 StyleSheet 的 create 方法创建的这个 container 里面的样式 ..

创建与应用样式《 React Native #1 》

统计

12081
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点