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'
      }
    }
  }
);

该代码有效，但是有一个例外，即初始旅馆屏幕标题与视图数据重叠。任何帮助表示赞赏。

检查以下输出：

Answer 1

原来docs有误导作用（至少对我而言）。我指定了headerTransparent: true,，因为我只想在屏幕上设置背景色，所以不需要。我将其删除并开始正常工作。