After upgrading to expo SDK 37.0.0 my stackNavigator header doubled in height

问题

"expo": "^37.0.0",    
"react-dom": "16.9.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz",    
"react-navigation": "^4.0.9",
"react-navigation-drawer": "^2.3.3",
"react-navigation-stack": "^1.10.3",
"react-navigation-tabs": "^2.6.0"

I am facing very weird issue. My stackNavigator header is too high. After upgrading to expo 37.0.0 my header bar doubled in height and I cannot return it to normal.

Here is my code for stackNavigator:

const DashboardStack = createStackNavigator(
  {
    DashboardDrawer: { screen: DashboardDrawerNavigator }
  },
  {
    defaultNavigationOptions: ({ navigation }) => {
      return {
        headerStyle: {
          backgroundColor: 'red',
          // height: 1,
          ...Platform.select({
            ios: {
              shadowColor: '#000',
              shadowOffset: { width: 0, height: 2 },
              shadowOpacity: 0.2,
              paddingTop: 0,
            },
            android: {
              elevation: 3,
              headerPressColorAndroid: '#111',
              paddingTop: 0,
            },
          }),
        },
        headerTintColor: '#111',
        headerTitleStyle: {
          color: '#999',
        },
        headerLeftContainerStyle: {
        },
        headerLeft: (
          <Icon
            containerStyle={styles.burgerMenuIcon}
            onPress={() => navigation.toggleDrawer()}
            name="menu"
            type="material-community"
            size={30}
            color={'#999'}
            underlayColor={'#111'}
          />)
      }
    },

  }
);

export default createAppContainer(DashboardStack);

const styles = StyleSheet.create({
  burgerMenuIcon: {
    paddingLeft: 20,
    // paddingTop: 0,
    // marginTop: 0,
  },
});

Here is how it looks:

The header is still visible even if I set the height to 0:

p.s. header is red for better visibility.

回答1:

Using the following prop in the navigation options fixed the issue for me:

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

From what I understood from react-navigation docs it creates a SafeAreaView component around the app's content, however why does it create this annoying small bar on the top is still unknown to me.

来源：https://stackoverflow.com/questions/61582383/after-upgrading-to-expo-sdk-37-0-0-my-stacknavigator-header-doubled-in-height