在 React-Native 中重新加载时，Header 和 BottomTabNavigator 会获得双倍高度

Question

我已经为此苦苦挣扎好几天了，找不到解决方案，所以欢迎所有帮助。重新加载应用程序时，我的 BottomTabBar 以及 Header 获得 增加的高度。当应用程序完成重新加载时，它会变为正常，但每次重新加载时都会发生这种情况。

我尝试将 React-Native 以及 React-navigation 更新到 0.72.3，现在还创建了一个空白项目来面对同样的问题。我将附上一张行为图像，其中left的一个是reloading，而right的一个是done。

请注意，我尝试过不同的 Android 模拟器（<10) and all have the same problem.

App.tsx

import * as React from 'react';
import { View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

function HomeScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Home!</Text>
    </View>
  );
}

function SettingsScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Settings!</Text>
    </View>
  );
}

const Tab = createBottomTabNavigator();

function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="Settings" component={SettingsScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

export default App;

Answer 1

一个可行的解决方案是将 NavigationContainer 包装在

SafeAreaProvider

中

<SafeAreaProvider>
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="Settings" component={SettingsScreen} />
      </Tab.Navigator>
    </NavigationContainer>
</SafeAreaProvider>