React Native Height Width

React Native Height Width: A altura e a largura de um componente determinam seu tamanho na tela.

Dimensões fixas

A maneira mais simples de definir as dimensões de um componente é adicionando um estilo fixo widthheightao estilo. Todas as dimensões no React Native são sem unidade e representam pixels independentes da densidade.

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

export default class FixedDimensionsBasics 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>
    );
  }
}

Definir dimensões dessa maneira é comum para componentes que sempre devem renderizar exatamente no mesmo tamanho, independentemente das dimensões da tela.

Dimensões flexíveis

Use flexno estilo de um componente para que o componente se expanda e encolha dinamicamente com base no espaço disponível. Normalmente você usará flex: 1, o que instrui um componente a preencher todo o espaço disponível, compartilhado igualmente entre outros componentes com o mesmo pai. Quanto maior o valor flex, maior a proporção de espaço que um componente terá em comparação com seus irmãos.

Um componente só pode ser expandido para preencher o espaço disponível se seu pai tiver dimensões maiores que 0. Se um pai não tiver um fixo widthheightou flex, o pai terá dimensões 0 e os flexfilhos não estarão visíveis.

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

export default class FlexDimensionsBasics extends Component {
  render() {
    return (
      // Try removing the `flex: 1` on the parent View.
      // The parent will not have dimensions, so the children can't expand.
      // What if you add `height: 300` instead of `flex: 1`?
      <View style={{flex: 1}}>
        <View style={{flex: 1, backgroundColor: 'powderblue'}} />
        <View style={{flex: 2, backgroundColor: 'skyblue'}} />
        <View style={{flex: 3, backgroundColor: 'steelblue'}} />
      </View>
    );
  }
}

Deixe uma resposta