[TOC]

概述

组件的高度和宽度决定了其在屏幕上显示的尺寸。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
/**
 * 这个Demo我们来学习一下设置组价的宽度和高度
 * 
 * 组件的高度和宽度决定了其在屏幕上显示的尺寸。
 */
import React, { Component } from 'react';
// 从“react-native” 导入以下这些控件
import { Platform, StyleSheet, Text, View, Image } from 'react-native';

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
  android:
    'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

type Props = {};
export default class DemoSizeApp extends Component<Props> {
  render() {
   
    return (
      // 给整体的VIew设置相同的属性。属性字段为styles.container
      <View style={styles.container}>

        {/* 我们定义三个不同颜色，不同大小的的View */}
        {/* React Native 中的尺寸都是无单位的，表示的是与设备像素密度无关的逻辑像素点。 */}
        {/* 这样给组件设置尺寸也是一种常见的模式，比如要求在不同尺寸的屏幕上都显示成一样的大小。 */}
        <View style={{width: 50, height: 20, backgroundColor: 'powderblue'}} />
        <View style={{width: 100, height: 20, backgroundColor: 'skyblue'}} />
        <View style={{width: 150, height: 20, backgroundColor: 'steelblue'}} />


          {/* 我们定义三个不同颜色，不同大小的的View */}
        {/* React Native 中的尺寸都是无单位的，表示的是与设备像素密度无关的逻辑像素点。 */}
        {/* 这样给组件设置尺寸也是一种常见的模式，比如要求在不同尺寸的屏幕上都显示成一样的大小。 */}
        <View style={{flex: 1, backgroundColor: 'powderblue'}} />
        <View style={{flex: 2, backgroundColor: 'skyblue'}} />
        <View style={{flex: 3, backgroundColor: 'steelblue'}} />

      </View>
    );
  }
}

// 实际开发中组件的样式会越来越复杂，我们建议使用StyleSheet.create来集中定义组件的样式。
// 比如像下面这样：
const styles = StyleSheet.create({
  container: {

    flex: 1,
    justifyContent: 'center',
    // 目前发现一个问题。当我们设置了alignItems。会导致设置弹性宽高的View显示不出来
    //alignItems: 'center',
    backgroundColor: '#C5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    color: '#FE3333',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

指定宽高

最简单的给组件设定尺寸的方式就是在样式中指定固定的width和height。React Native 中的尺寸都是无单位的，表示的是与设备像素密度无关的逻辑像素点。这样给组件设置尺寸也是一种常见的模式，比如要求在不同尺寸的屏幕上都显示成一样的大小。

弹性（Flex）宽高

在组件样式中使用flex可以使其在可利用的空间中动态地扩张或收缩。一般而言我们会使用flex:1来指定某个组件扩张以撑满所有剩余的空间。如果有多个并列的子组件使用了flex:1，则这些子组件会平分父容器中剩余的空间。如果这些并列的子组件的flex值不一样，则谁的值更大，谁占据剩余空间的比例就更大（即占据剩余空间的比等于并列组件间flex值的比）。