Question

我想在React-Navigation V2中将一个组件放在createBottomTabNavigator TabBar的正上方。

标签栏的高度似乎在各种设备上有所不同（尤其是iOS设备）。有没有办法计算标签栏在设备上显示的高度？

Answer 1

当您检查source code for react-navigation-tabs哪个反应导航uses for createBottomTabNavigator时，您会发现只有2个不同的底部标签栏高度。紧凑和默认，changes between some conditions。您也可以手动根据这些条件设置组件的位置。

Answer 2

benny的另一个答案指向您需要去的地方，但没有给您简便的方法来检查是否。为了完成答案，我将详细说明要使用哪个高度所需的确切检查。首先，我们需要知道选项卡栏是否处于自适应模式。如果您尚未传递“ adaptive”作为参数，则对于所有装有iOS 11+的iOS设备，adaptive都设置为true。如果不是iOS11 +，则自适应为false。因此，如果您尚未将“自适应”作为参数传递给tabBarOptions，则该函数为：

private void resize(String type){
    if(type.equals("maximized")){
        System.out.println(panel_menu.getLocation());
        panel_menu.setPreferredSize(new Dimension(panel_menu.getWidth(), d.height));
        panel_menu.revalidate();
    }
}

Answer 3

React 导航 5 +

您现在有两个选项可以获取底部标签栏的高度。

要获取底部标签栏的高度，您可以使用带有 React 的 Context API 的 BottomTabBarHeightContext 或 useBottomTabBarHeight，这是一个自定义 Hook：

{
    "Id" : "Q1D3",
    "INT_ID" : "1234",
    "Location" : "ENG",
    "Company" : "COMP1",
    "start" : 20191001,
    "end" : 20230930
}

{
    "Id" : "Q1D3",
    "INT_ID" : "1235",
    "Location" : "ENG",
    "Company" : "COMP1",
    "start" : 20191001,
    "end" : 20230930
}

{
    "Id" : "Q1D3",
    "INT_ID" : "1236",
    "Location" : "USA",
    "Company" : "COMP3",
    "start" : 20191001,
    "end" : 20230930
}

{
    "Id" : "Q1D3",
    "INT_ID" : "1237",
    "Location" : "USA",
    "Company" : "COMP3",
    "start" : 20191001,
    "end" : 20230930
}

{
    "Id" : "Q1D5",
    "INT_ID" : "1237",
    "Location" : "ENG",
    "Company" : "COMP1",
    "start" : 20191001,
    "end" : 20230930
}

{
    "Id" : "Q1D5",
    "INT_ID" : "1239",
    "Location" : "ENG",
    "Company" : "COMP1",
    "start" : 20191001,
    "end" : 20230930
}


{
    "Id" : "Q1D3",
    "INT_ID" : "1237",
    "Location" : "CAN",
    "Company" : "COMP1",
    "start" : 20191001,
    "end" : 20230930
}

或

{
    "Id" : "Q1D3",
    "INT_ID" : "1234",
    "Location" : "ENG",
    "Company" : "COMP1",
    "start" : 20191001,
    "end" : 20230930
}

{
    "Id" : "Q1D3",
    "INT_ID" : "1235",
    "Location" : "ENG",
    "Company" : "COMP1",
    "start" : 20191001,
    "end" : 20230930
}

{
    "Id" : "Q1D3",
    "INT_ID" : "1236",
    "Location" : "USA",
    "Company" : "COMP3",
    "start" : 20191001,
    "end" : 20230930
}

{
    "Id" : "Q1D3",
    "INT_ID" : "1237",
    "Location" : "USA",
    "Company" : "COMP3",
    "start" : 20191001,
    "end" : 20230930
}

确保您使用版本 import { BottomTabBarHeightContext } from '@react-navigation/bottom-tabs'; // ... <BottomTabBarHeightContext.Consumer> {tabBarHeight => ( /* render something */ )} </BottomTabBarHeightContext.Consumer>

Answer 4

关于如何在选项卡栏上方放置内容的问题，也可以在没有绝对放置的情况下实现。这样，您就不必依赖于确定条形高度的逻辑是如何实现的（将来可能还会改变）。

import { createBottomTabNavigator, BottomTabBar } from "react-navigation"

createBottomTabNavigator({
    // Your tabs
}, {
    tabBarComponent: (props) => <BottomTabBar {...props} />
})

例如，如果您希望标签上方有一个红色的小条，则可以执行以下操作

tabBarComponent: (props) => (
    <View>
        <View style={{ backgroundColor: "red", height: 10 }} />
        <BottomTabBar {...props} />
    </View>
)

Answer 5

为避免Ipnone X问题，他们在内部使用react-native-safe-area-view。

您只需要知道底部的填充：

import { getInset } from 'react-native-safe-area-view'
const bottomOffset = getInset('bottom')

它为我们解决了问题。

我们还使用特定的组件位置。

在React-Navigation中的任何设备上获取标签栏的高度

5 个答案:

React 导航 5 +