React Native + Expo中Material顶部导航栏顶部出现空白间隙问题

嘿，我看了你的代码和问题截图，这个顶部空白的问题其实很好解决——你手动添加的状态栏组件和React Navigation导航器自动生成的状态栏padding重复了，导致顶部多出来一块和状态栏高度一致的空白区域。

问题根源 #

你自己实现了StatusBarBackground来处理状态栏样式，但createMaterialTopTabNavigator（被包裹在StackNavigator里）在Expo环境下，默认会自动给导航容器加上等于状态栏高度的padding，用来适配状态栏。这就相当于顶部叠加了两层状态栏高度的空间，看起来就是大片空白。

两种修复方案，任选其一就行： #

方案一：移除自定义状态栏，让导航器自动处理

既然React Navigation本身就能适配状态栏，我们可以删掉自己写的StatusBarBackground，直接在导航配置里搞定状态栏样式：

// 修改App.js的render方法，去掉自定义状态栏组件
render() {
  return (
    <View style={{flex: 1}}>
      <MainNavigator />
    </View>
  )
}

// 然后更新Tabs的配置，添加状态栏相关设置
const Tabs = createMaterialTopTabNavigator({
  List: { screen: List, navigationOptions: { tabBarLabel: 'List' } },
  Add: { screen: Add, navigationOptions: { tabBarLabel: 'Add' } },
}, {
  navigationOptions: {
    header: null,
    // 设置状态栏为浅色文字，背景色和标签栏一致
    statusBarStyle: 'light-content',
    headerStyle: { backgroundColor: orange }
  },
  tabBarOptions: {
    activeTintColor: white,
    style: {
      height: 56,
      backgroundColor: orange,
      shadowColor: 'rgba(0, 0, 0, 0.24)',
      shadowOffset: { width: 0, height: 3 },
      shadowRadius: 6,
      shadowOpacity: 1
    }
  }
})

方案二：保留自定义状态栏，禁用导航器的自动padding

如果你想保留自己的StatusBarBackground组件，只需要让导航器不要再额外添加状态栏高度的padding就行。修改MainNavigator的配置：

const MainNavigator = createStackNavigator({
  Home: { screen: Tabs },
}, {
  defaultNavigationOptions: {
    header: null,
    // 移除导航器自动添加的状态栏padding
    contentContainerStyle: {
      paddingTop: 0,
    },
  },
})

或者也可以直接在Tabs的tabBarOptions.style里添加paddingTop: 0，效果是一样的：

tabBarOptions: {
  activeTintColor: white,
  style: {
    height: 56,
    backgroundColor: orange,
    paddingTop: 0, // 加上这一行，去掉标签栏顶部的额外padding
    shadowColor: 'rgba(0, 0, 0, 0.24)',
    shadowOffset: { width: 0, height: 3 },
    shadowRadius: 6,
    shadowOpacity: 1
  }
}

效果验证 #

修改完成后重新运行项目，顶部的空白应该就消失了，标签栏会完美贴合状态栏下方（或者你的自定义状态栏组件）。

内容的提问来源于stack exchange，提问作者geoffjay