En react-navigation, ¿cómo obtengo las dimensiones del área visible entre el encabezado y TabBar?

Solución:

Solucion 1

Si desea calcular la altura de la ventana visible directamente, puede usar la devolución de llamada onLayout, por ejemplo, en la navegación de pestañas de cada página,

 render() {
      return (
     <View style={{ flex: 1}} onLayout={(event) => {
              var {x, y, width, height} = event.nativeEvent.layout;
              this.viewableWindowHeight=height;
              // use height as viewableWindowHeight
       }} />

    <ScollView>
     //Your scrollable contant
    </ScrollView>
  </View>
);

Solucion 2

De acuerdo con un problema en la navegación de reacción, no puede calcular directamente la altura de la barra de la pestaña inferior. Pero si envuelve la barra de pestañas inferior en una vista y luego puede calcular la altura de la vista como barra de pestañas inferior. Considere el siguiente ejemplo

    import React, { Component } from 'react';
import { connect } from 'react-redux';
import { View } from 'react-native';
import { BottomTabBar } from 'react-navigation';

class TabBarComponent extends Component {
  measure = () => {
    if (this.tabBar) {
      this.tabBar.measureInWindow(this.props.setTabMeasurement);
    }
  }

  render() {
    return (
      <View
        ref={(el) => { this.tabBar = el; }}
        onLayout={this.measure}
      >
        <BottomTabBar {...this.props} />
      </View>
    );
  }
}

function mapDispatchToProps(dispatch) {
  return {
    setTabMeasurement: (x, y, width, height) => dispatch({
      type: 'SET_TAB_MEASUREMENT',
      measurement: {
        x, y, width, height,
      },
    }),
  };
}

export default connect(null, mapDispatchToProps)(TabBarComponent);

Prueba esto:

import { Dimensions, Platform } from 'react-native';
import {
  getStatusBarHeight,
  getBottomSpace,
} from 'react-native-iphone-x-helper';
import { Header } from 'react-navigation';

const { height } = Dimensions.get('window');
  const stackHeaderHeight = Header.HEIGHT;

  /* Taken from source code of react-navigation-tabs*/
  const TAB_BAR_DEFAULT_HEIGHT = 49;
  const TAB_BAR_COMPACT_HEIGHT = 29;

  const TAB_BAR_HEIGHT = this.bottomTabBarRef._shouldUseHorizontalLabels() && !Platform.isPad
    ? TAB_BAR_COMPACT_HEIGHT
    : TAB_BAR_DEFAULT_HEIGHT;

  const marginTop = getStatusBarHeight() + stackHeaderHeight;
  const marginBottom = getBottomSpace() + TAB_BAR_HEIGHT;

  // < What you're after 
  const viewableWindowHight = height - marginTop - marginBottom; 

PARA TBBAR

La altura cambia entre estos dos valores >> TAB_BAR_COMPACT_HEIGHT, y TAB_BAR_DEFAULT_HEIGHT, según una condición determinada por este método:

De acuerdo con el código fuente de react-navigation-tabs.

O

Podrías configurar initialLayout para usted TabNavigatorConfig como se menciona en la documentación:

initialLayout: un objeto opcional que contiene la altura y el ancho iniciales, se puede pasar para evitar el retraso de un fotograma en el renderizado react-native-tab-view.

PARA IPHONE-X

Puede acceder a statusBar height, bottomSpace en Iphone-X de forma segura a través del módulo npm react-native-iphone-x-helper

Simplemente puede usar SafeAreaView, que establecerá automáticamente topBarHeight principalmente para teléfonos iPhoneX.

---

---

Utiliza Nuestro Buscador