React native：createStackNavigator 重叠在实际屏幕内容上 (Android)

Question

我正在创建一个示例酒店列表应用程序，其中包含以下菜单：

export const loggedInMenu = createMaterialBottomTabNavigator(
  {
    Hotels: {
      screen: hotelDetailsScreen,
      navigationOptions: {
        tabBarLabel: "Hotels",
        tabBarIcon: <Icon name="hotel" size={24} />
      }
    },
    HotelsSearch: {
      screen: HotelsSearch,
      navigationOptions: {
        tabBarLabel: "Search",
        tabBarIcon: <Icon name="search" size={24} />
      }
    },
    Favourites: {
      screen: Favourites,
      navigationOptions: {
        tabBarLabel: "Hotels",
        tabBarIcon: <Icon name="favorite" size={24} />
      }
    },
  },
  {
    initialRouteName: 'Hotels'
  }
);

export const hotelDetailsScreen = createStackNavigator(
  {
    Hotels: {screen: Hotels},
    hotelDetails: {screen: hotelDetails},
  },
  {
    initialRouteName: "Hotels",
    headerLayoutPreset: "center",
    navigationOptions: {
      title: "Hotels",
      headerTransparent: true,
      headerStyle: {
        backgroundColor: '#694fad'
      }
    }
  }
);

代码有效，但有一个例外，即初始酒店屏幕 header 与视图数据重叠。任何帮助表示赞赏。

检查以下输出：

Answer 1

事实证明 docs 具有误导性（至少对我而言）。我指定了不需要的 headerTransparent: true,，因为我只是想在屏幕上设置背景颜色。我将其删除并开始正常工作。

React native：createStackNavigator 重叠在实际屏幕内容上 (Android)

React native: createStackNavigator overlaps on the actual screen contents (Android)

react-native

react-native-navigation