Как реагировать на навигацию, как получить размеры видимой области между заголовком и TabBar?

Question

const viewableWindowHeight = Dimensions.get ('window'). Height - Header.HEIGHT - ???

Как получить высоту TabBar?Что делать, если iPhone X?Как я могу принять это во внимание?

Answer 1

Попробуйте это:

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; 

ДЛЯ TBBAR

Высота изменяется между этими двумя значениями >> TAB_BAR_COMPACT_HEIGHT и TAB_BAR_DEFAULT_HEIGHT в соответствии с условием, определенным этим методом:

Согласно исходных кодов реагирования-навигации исходный код.

OR

Вы можете установить initialLayout на TabNavigatorConfig, как указано в документации :

initialLayout - Необязательный объект, содержащий начальную высоту и ширина, может быть передана для предотвращения задержки одного кадра в Реакция рендеринга собственного представления вкладок.

ДЛЯ IPHONE-X

Вы можете безопасно получить доступ к строке состояния, нижнему пространству в Iphone-X, хотя response-native-iphone-x-helper модуль npm

Answer 2

Раствор 1

Если вы хотите напрямую рассчитать видимую высоту окна, вы можете использовать обратный вызов onLayout, например, для навигации по вкладкам на каждой странице,

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

Раствор 2

В соответствии с проблемой в реагирующей навигации вы не можете напрямую рассчитать высоту нижней вкладки «Панель». Но если вы поместите нижнюю панель вкладок в представление, а затем сможете рассчитать высоту этих представлений как нижнюю панель вкладок. Рассмотрим пример ниже

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

Answer 3

Вы можете просто использовать SafeAreaView , который автоматически установит topBarHeight в основном для телефонов iPhoneX.