RN入门基础5：指定/弹性宽高

目录

 

一、介绍

二、代码举例

---

一、介绍

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

组件的宽高分为两种，指定宽高和弹性宽高

1.指定宽高

是指在样式中指定固定的width和height。React Native中的尺寸都是无单位的，表示的是与设备像素密度无关的逻辑像素点。这样在不同尺寸的屏幕上都显示成一样的大小。

2.弹性（Flex）宽高

flex可以使组件在可利用的空间中动态地扩张或收缩。一般而言我们会使用

flex:1来指定某个组件扩张以撑满所有剩余的空间。

如果有多个并列的子组件使用了flex:1，则这些子组件会平分父容器中剩余的空间。

如果这些并列的子组件的flex值不一样，则组件占据剩余空间的比等于并列组件间flex值的比

注意:

组件能够撑满剩余空间的前提是其父容器的尺寸不为零。如果父容器既没有固定的width和height，也没有设定flex，则父容器的尺寸为零。其子组件如果使用了flex，也是无法显示的。

二、代码举例

1.指定宽高

import React, { Component } from 'react';
import { AppRegistry, View } from 'react-native';

export default class myprojectname extends Component {
  render() {
    return (
      <View>
        <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
        <View style={{width: 100, height: 100, backgroundColor: 'skyblue'}} />
        <View style={{width: 150, height: 150, backgroundColor: 'steelblue'}} />
      </View>
    );
  }
};
// 注册应用(registerComponent)后才能正确渲染
// 注意：只把应用作为一个整体注册一次，而不是每个组件/模块都注册
AppRegistry.registerComponent('myprojectname', () => myprojectname);

效果：

2.弹性宽高

更改核心类如下

export default class myprojectname extends Component {
    render() {
        return (
            // 去掉父View中的`flex: 1`，则父View不再具有尺寸，因此子组件也无法再撑开。
            // 然后再用`height: 300`来代替父View的`flex: 1`，子组件会充满父组件，但不在是全屏，而是300高度
            <View style={{flex: 1}}>
                <View style={{flex: 1, backgroundColor: 'powderblue'}} />
                <View style={{flex: 2, backgroundColor: 'skyblue'}} />
                <View style={{flex: 3, backgroundColor: 'steelblue'}} />
            </View>
        );
    }
};

效果