React Native - StackNavigator 标头具有双倍高度答案

【问题标题】：React Native - StackNavigator header has double heightReact Native - StackNavigator 标头具有双倍高度
【发布时间】：2020-10-19 08:59:00
【问题描述】：

我有一个与After upgrading to expo SDK 37.0.0 my stackNavigator header doubled in height 类似的问题，但是我在 Expo SDK 36 上遇到了同样的问题。我尝试升级 Expo (37.0.0) 和 react-navigation 版本，但它对标题没有影响。

"react-navigation": "^3.13.0",
"react-navigation-drawer": "^1.4.0",
"react-navigation-stack": "^1.7.3",
"react-navigation-tabs": "^1.2.0",

我有一个身份验证开关（如 react-navigation docs），然后路由到 BottomTabNavigator 上方的堆栈。通过这种方式，我可以在底栏上呈现一个屏幕。然后我在 BottomTabNavigator 中有一个堆栈列表。

// Main appNavigator
export default createAppContainer(
    createAnimatedSwitchNavigator({
        AuthLoading: AuthLoadingScreen,
        Auth: AuthStack,
        App: AboveBottomTabStack,
    }, {
        initialRouteName: 'AuthLoading',
    })
);

// Components routed here are ABOVE bottom tab navigator
const AboveBottomTabStack = createStackNavigator(
    {
        Tabs: {
            screen: MainTabNavigator,
            navigationOptions: {
                // Hides the header, in this case the headers of the Stack components inside TabNavigator are shown
                header: null,
            }
        },
        ReportScreen: ReportScreen
    }
);

// Components routed here are UNDER bottom tab navigator
const MainTabNavigator = createBottomTabNavigator({
    HomeStack: HomeStack,
    ReportListStack: ReportListStack,
    SettingsStack: SettingsStack,
});

// One of the stacks inside the TabNavigator
const HomeStack = createStackNavigator(
    {
        Dashboard: {
            screen: DashboardScreen,
            navigationOptions: {
                headerStyle: {
                    //backgroundColor:'#00beb8',
                    height: 0,  // Even with height 0 the header is displayed
                }
            }
        },
    }
);

我尝试将最后一个堆栈的标题设置为 null（例如 HomeStack 中的那个），并且标题实际上隐藏了。问题是大小，即使高度设置为0，也会显示一小部分标题，您可以在顶部的链接问题中看到图片。

【问题讨论】：

为了你的未来，使用 react-navigation 5.x
你觉得升级到5.x能解决问题吗？

标签： reactjs react-native react-native-navigation expo

【解决方案1】：

好的，在朋友的帮助下，我们设法找到了解决此问题的方法。在导航选项中使用以下道具为我们解决了这个问题：

 navigationOptions: {
            headerForceInset: { vertical: 'never' },
        }

据我从 react-navigation docs 了解到的，它围绕应用程序的内容创建了一个 SafeAreaView 组件，但是我仍然不知道为什么它会在顶部创建这个烦人的小条。

编辑：这个道具应该只为 android 编写，因为在 Iphone 上它会产生图形问题

【讨论】：