升级到 expo SDK 37.0.0 后，我的 stackNavigator 标头高度增加了一倍

2022-01-23 00:00:00 javascript react-native expo react-navigation 
"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 标头太高.升级到 expo 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. 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.

相关文章