在 react-navigation 中，如何获取标题和 TabBar 之间可见区域的尺寸？

Posted 2023-03-15

【中文标题】在 react-navigation 中，如何获取标题和 TabBar 之间可见区域的尺寸？

【英文标题】：In react-navigation, how do I get the dimensions of the visible area between the header and TabBar?

【发布时间】：2019-03-13 22:50:54

【问题描述】：

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

如何获得 TabBar 的高度？ 如果 iPhone 是 X 怎么办？我该如何考虑这一点？

【问题讨论】：

你可以改用SafeAreaView，这样它就会自动应用填充，尤其是对于像iphoneX这样的手机

这可能是一篇不错的文章。它应该根据您的版本解释 SafeAreView：SafeAreaView react-navigation to fix iPhone X design issue

【参考方案1】：

解决方案 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

根据react navigation中的一个问题，不能直接计算底部tab Bar的高度。但是，如果您将底部标签栏包装到视图中，然后您可以将该视图高度计算为底部标签栏。考虑下面的例子

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

【参考方案2】：

试试这个：

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，根据此方法确定的条件：

根据react-navigation-tabs源代码。

或

您可以将initialLayout 设置为TabNavigatorConfig，如documentation 中所述：

initialLayout - 包含初始高度和的可选对象 宽度，可以通过，以防止一帧延迟 react-native-tab-view 渲染。

适用于 IPHONE-X

您可以通过react-native-iphone-x-helper npm 模块安全地访问 Iphone-X 中的 statusBar 高度、bottomSpace

【参考方案3】：

您可以简单地使用SafeAreaView，它会自动为 iPhoneX 手机设置 topBarHeight。

【参考方案4】：

在新版本中使用

import useHeaderHeight from "react-navigation-stack"; console.log(useHeaderHeight());