React Native 入门（八） - 样式与宽高

当前 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 也能占满屏幕呢？这是因为它默认的父容器就是手机的屏幕，所以自然能够独享整个屏幕了。

文章同步自 CSDN：http://blog.csdn.net/qq_24867873/article/details/78361556

欢迎关注我的微信公众号