升级到expo SDK 37.0.0后，我的stackNavigator标头的高度增加了一倍 [英] 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"

我面临一个非常奇怪的问题.我的stackNavigator标头太高.升级到37.0.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.

这是我的stackNavigator代码:

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

这是它的外观:

即使将高度设置为0，标题仍然可见:

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

p.s.标头为红色以提高可见度.

p.s. header is red for better visibility.

推荐答案

在导航选项中使用以下道具为我解决了此问题:

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

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

根据我对react-navigation docs 的理解，SafeAreaView组件围绕应用程序的内容，但是为什么我在顶部仍然创建一个烦人的小栏?

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.

这篇关于升级到expo SDK 37.0.0后，我的stackNavigator标头的高度增加了一倍的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！