React Native 入门(八)
来源:互联网 发布:软件排行 编辑:程序博客网 时间:2024/05/03 15:58
当前 RN 版本:0.49
操作环境:Windows 10
样式
在 React Native 中,所有的组件都接受一个名为 style 的属性,这个属性用来设置该组件的样式。这些样式的名称基本遵循了 CSS 中的命名方式,不过都改成了按照驼峰命名法进行命名,比如将 background-color
改为了 backgroundColor
。
style 属性可以是一个普通的 JavaScript 对象,也可以是对象的数组。在数组中位置越靠后优先级越高,所以你如果在数组中不同的位置上设置了相同属性,则会优先采用靠后的属性。
一般来说,每个组件都会用到很多样式,这个时候直接写成对象的方式就会很复杂,也不易修改和复用。所以建议通过 StyleSheet.create()
来集中定义样式并使用。
下面举个例子说明一下:
import React, {Component} from 'react';import { View, Text, Dimensions, StyleSheet} from 'react-native';export default class App extends Component<{}> { render() { return <View style={{backgroundColor: 'gray', height: 100, width: window.width}}> <Text style={{textAlign: 'center', color: 'red'}}>red text</Text> <Text style={styles.blueText}>blue text</Text> <Text style={[{textAlign: 'center'}, {color: 'yellow'}]}>yellow text</Text> <Text style={[styles.blueText, {color: 'pink'}]}>pink text</Text> </View> }}const window = Dimensions.get('window');const styles = StyleSheet.create({ blueText: { textAlign: 'center', color: 'blue' }})
运行效果如下:
首先我们通过对象的方式设置了最外层布局的样式,背景色为灰色,高度为 100,宽度为屏幕的宽度。
第一个 <Text/>
通过对象的方式设置了文本居中、文字颜色为红色的样式。
然后我们通过 StyleSheet.create()
创建了一个名为 styles
的常量,并定义了一个名为 blueText
的样式:文本居中,颜色为蓝色,并在第二个 <Text/>
中通过 styles.blueText
使用了它。
第三个 <Text/>
的样式使用了一个数组。
第四个 <Text/>
的样式也使用了一个数组,虽然两个元素中都对文本的颜色进行了定义,但由于 pink
是在后面定义的,所以优先级更高。
宽度与高度
固定宽高
指定一个组件的 width
和 height
是设置它的尺寸的最简单的方式。在我们上面的例子中,给 <View/>
设置了固定的宽和高。我们可以通过下面的方式获取到屏幕的宽高:
const window = Dimensions.get('window');const width = window.width; // 屏幕宽度const height = window.height; // 屏幕高度
我们还可以用解构赋值的方式:
const {width, height} = Dimensions.get('window');
然后直接使用 width
或 height
就可以了。注意 React Native 中的尺寸都是无单位的,表示的是与设备像素密度无关的逻辑像素点。
弹性宽高
弹性宽高和 Android 中 LinearLayout 的 weight
属性非常相似,对一个组件使用 flex: 1
则会让这个组件占满父容器的所有剩余空间。如果多个并列的组件都使用了 flex
,则它们占据的剩余空间与各自 flex
的数值成正比,数值越大,占据的空间也就越多。
我们修改上面的代码,在最外层的 <View/>
以及第一个 <Text/>
的样式中加入 flex: 1
可以看到下面的结果:
可以看到外层的 <View/>
占据了整个屏幕,而第一个 <Text/>
则占据了 <View/>
的所有剩余空间。
注意: 组件能够占满剩余空间的前提是它的父容器的尺寸不为零。如果外层组件既没有固定的宽高,也没有设定 flex,则它的尺寸为零,这个时候给内部组件设置 flex 是没有效果的。
可能有人会有疑问,最外层的 <View/>
并没有父容器,为什么使用了 flex 也能占满屏幕呢?这是因为它默认的父容器就是手机的屏幕,所以自然能够独享整个屏幕了。
文章已同步至简书:http://www.jianshu.com/p/c1b106894842
- React Native 入门(八)
- React Native入门(八)之网络请求Fetch
- React Native 入门(一)
- React Native 入门(二)
- React Native 入门(三)
- React Native 入门(四)
- React Native 入门(五)
- React Native 入门(六)
- React Native 入门(七)
- React Native 入门(九)
- React Native 入门(十)
- React Native 入门(十一)
- React Native 入门(十二)
- (八)React Native---WebView组件
- React Native基础与入门(二)--初识React Native
- React Native (一) --React 入门
- React Native学习八- WebView
- React Native 系列(八) -- 导航
- 挽救 centos7 系统
- 关于使用spring框架的时候抽象类中注入其他实现类失败的解决方法
- 使用XML的五种场合
- altium designer 让元件旋转任意角度
- listview-适配器
- React Native 入门(八)
- 如何创建可搜索的PDF文档
- js节点属性的创建 添加 删除
- Linux学习:多路复用 select / poll
- 解决Windows 7启动 Docker 报错
- STM32 DMA使用
- 多线程的代价
- Siebel Task UI的功能和优点
- 一文读懂深度学习与机器学习的差异