欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-05-24 21:30:03
...

目录

 

一、介绍

二、代码举例


一、介绍

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

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

1.指定宽高

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

2.弹性(Flex)宽高

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

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

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

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

注意:

组件能够撑满剩余空间的前提是其父容器的尺寸不为零。如果父容器既没有固定的widthheight,也没有设定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);

效果:

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

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>
        );
    }
};

效果

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