createBottomTabNavigator怪异的高度

Question

我在react-navigation和create-react-native-app创建的应用程序中使用redux的createBottomTabNavigator。 （注意：Redux不用于导航）。

在我的iPad上，该选项卡没有任何问题，但是在移动设备（iPhone 7 +，Google Pixel 2xl）上看起来很奇怪，可以在下面找到屏幕截图。

我的代码如下：

app.js：

import React, {Component} from 'react';
import {createStore} from 'redux';
import {Provider} from 'react-redux';
import reducers from './reducers';
import Router from './Router';

const store = createStore(reducers);

export default class LedApp extends Component {
    render() {
        return (
            <Provider store={store}>
                <Router/>
            </Provider>
        )
    }
}

Router.js

// Imports omitted
const HomeStack = createStackNavigator({
    ListLocations: ListLocationsScreen,
    LocationDetails: LocationDetailScreen,
}, {
    initialRouteName: 'ListLocations',
    navigationOptions: {
        headerStyle: {
            backgroundColor: '#f4511e',
        },
        headerTintColor: '#fff',
        headerTitleStyle: {
            fontWeight: 'bold',
        },
    },
});

export default createBottomTabNavigator({
    "Locations": HomeStack,
});