React native StackNavigator菜单未在左侧对齐

我正在尝试在我的expo应用程序中实现react stack navigator。除了抽屉菜单图标没有按预期显示在左侧外，该应用程序工作正常。谁能告诉我我在哪里搞砸了

以下是该应用程序的屏幕截图

这是我的App.js

从“React”导入React；
从“react native”导入{样式表、文本、视图、安全区域视图、滚动视图、维度、图像}；
从“react navigation”导入{createDrawerNavigator，DrawerItems}
从“/src/components/splash”导入SplashScreen；
从“./src/screens/LibraryScreen”导入LibraryScreen；
从“/src/screens/rementerscreen”导入提醒屏幕；
从“/src/screens/ReportScreen”导入ReportScreen；
从“/src/screens/SettingsScreen”导入设置屏幕；
从“/src/screens/TrainingScreen”导入培训屏幕；
导出默认类App扩展React.Component{
render（）{
返回(
);
}
}
const CustomDrawerComponent=（道具）=>(
)
const AppDrawerNavigator=createDrawerNavigator({
培训：培训屏幕，
图书馆：图书馆屏幕，
报告：报告屏幕，
提醒：提醒屏幕，
设置：设置屏幕
},{
contentComponent:CustomDrawerComponent
})
const styles=StyleSheet.create({
容器：{
弹性：1，
背景颜色：“#fff”，
对齐项目：“居中”，
为内容辩护：“中心”，
},
});

您可能需要在NativeBase

标题中包含所有
左侧
、
正文
和
右侧


this.props.navigation.openDrawer（）}/>
只需在代码中添加以下样式即可。在代码中添加此样式

Training.js

  class TrainingScreen extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Header >
          <Left style={{justifyContent:"flex-start",flex:1}}><---Update---
            <Icon
              name="menu"
              onPress={() => this.props.navigation.openDrawer()}
            />
          </Left>
        </Header>
        <View
          style={{ flex: 1, alignItems: "center", justifyContent: "center" }}
        >
          <Text>Training Screen</Text>
        </View>
      </View>
    );
  }
}
export default TrainingScreen;

class TrainingScreen扩展反应组件{
render（）{
返回(
训练屏幕
);
}
}
导出默认训练屏幕；
您能在snack.expo.io上分享吗？为了更快的回答。