React native+expo topbar材质导航在顶部留下间隙

我正在尝试向React原生应用程序添加一个选项卡式导航,如果有必要,也可以使用expo,每当我这样做时,屏幕顶部就会出现一大块白色。我不知道是什么导致了这种情况,但状态栏背景不应该将其向下推,就我所知,更改导航或主视图的高度样式没有任何作用。

这看起来像:

重新创建的完整源是:

// utils/colors.js
export const white = '#fff'
export const orange = '#f26f28'

// App.js
import React, { Component } from 'react'
import { StyleSheet, View, StatusBar, Dimensions } from 'react-native'
import {
  createMaterialTopTabNavigator,
  createStackNavigator
} from 'react-navigation'
import { Constants } from 'expo'
import List from './components/List'
import Add from './components/Add'
import { orange, white } from './utils/colors'

function StatusBarBackground ({ backgroundColor, ...props }) {
  return (
    <View style={{ backgroundColor, height: Constants.statusBarHeight }}>
      <StatusBar translucent backgroundColor={backgroundColor} {...props} />
    </View>
  )
}

const Tabs = createMaterialTopTabNavigator({
  List: {
    screen: List,
    navigationOptions: {
      tabBarLabel: 'List',
    },
  },
  Add: {
    screen: Add,
    navigationOptions: {
      tabBarLabel: 'Add',
    },
  },
}, {
  navigationOptions: {
    header: null
  },
  tabBarOptions: {
    activeTintColor: white,
    style: {
      height: 56,
      backgroundColor: orange,
      shadowColor: 'rgba(0, 0, 0, 0.24)',
      shadowOffset: {
        width: 0,
        height: 3
      },
      shadowRadius: 6,
      shadowOpacity: 1
    }
  }
})

const MainNavigator = createStackNavigator({
  Home: {
    screen: Tabs,
  },
})

export default class App extends Component {
  render() {
    return (
      <View style={{flex: 1}}>
        <StatusBarBackground backgroundColor={orange} barStyle="light-content" />
        <MainNavigator />
      </View>
    )
  }
}

这个 Add 和 List 组件只是一个带有文本的视图,两者看起来都类似于此:

import React, { Component } from 'react'
import { View, Text } from 'react-native'

class Add extends Component {
  render() {
    return (
      <View>
        <Text style={{fontSize: 20}}>Add</Text>
      </View>
    )
  }
}

export default Add