无法在React Native的导航抽屉中显示标题和汉堡按钮

Question

在React Native的导航抽屉中无法显示标题和汉堡按钮。

问题

• 抽屉项未显示标题
• 汉堡包图标不显示任何动作

使用反应导航并使用expo

来实现自定义抽屉

导航从一个屏幕切换到另一个屏幕，但抽屉屏幕（DrawerScreen.js）上的选项没有显示标题

Source Code Link

App.js

import AppContainer from "./src/routes";

export default class App extends React.Component {
  render() {
    return (
      <ThemeProvider theme={theme}>
        <View style={{ flex: 1, backgroundColor: ColorConfig.COLOR_WHITE }}>
          <AppContainer />
        </View>
      </ThemeProvider>
    );
  }
}

DrawerScreen.js

class DrawerScreen extends Component {
   navigateToScreen = (route) => () => {
      const navigateAction = NavigationActions.navigate({
        routeName: route
      });

      this.props.navigation.dispatch(navigateAction);
      this.props.navigation.dispatch(DrawerActions.closeDrawer());
  }

  render () {
      return (
      <View>
        <ScrollView>
          <View>
            <Text style={{ margin: 15, fontSize: 20, color: theme.colors.secondary, fontWeight: "bold" }}>
            Hi User,
            </Text>
            <View style={styles.menuItem}>
              <Text onPress={this.navigateToScreen("Home")}>
                Home
              </Text>
            </View>
            <View style={styles.menuItem}>
              <Text onPress={this.navigateToScreen("Profile")}>
              Profile
              </Text>
            </View>
            <View style={styles.menuItem}>
              <Text onPress={this.navigateToScreen("Payment")}>
                Payment
              </Text>
            </View>
            <View style={styles.menuItem}>
              <Text onPress={this.navigateToScreen("AboutUs")}>
                AboutUs
              </Text>
            </View>
          </View>
        </ScrollView>
      </View>
    );
   }
}

DrawerScreen.propTypes = {
    navigation: PropTypes.object
};

export default DrawerScreen;

index.js

const navigationOptions = {
    defaultNavigationOptions: {
        headerStyle: {
            backgroundColor: theme.colors.primary,
        },
        headerTintColor: "#fff",
    }
};

const MenuImage = ({navigation}) => {
  if(!navigation.state.isDrawerOpen){
      return <Image source={require("../../assets/menu-button.png")}/>
  }else{
      return <Image source={require("../../assets/left-arrow.png")}/>
  }
}

const AuthStack = createStackNavigator({
    Login: {
        screen: LoginScreen,
        navigationOptions: { title: "Login" }
    },
    ForgotPassword: {
        screen: ForgotPasswordScreen,
        navigationOptions: { title: "Forgot Password" }
    }
}, {
    ...navigationOptions
});

const DrawerStack = createDrawerNavigator({
    Home: {
    screen: HomeScreen,
    navigationOptions: { title: "Home" }
    },
    Profile: {
    screen: ProfileScreen,
    navigationOptions: { title: "Profile" }
    },
    Payment: {
    screen: PaymentScreen,
    navigationOptions: { title: "Payment" }
    }
}, {
    initialRouteName: "Home",
    contentComponent: DrawerScreen,
});

const DrawerNavigation = createStackNavigator({
  DrawerStack: {
    screen: DrawerStack,
  },
  AboutUs: {
    screen: AboutUsScreen,
    navigationOptions: { title: "About Us" }
  }
},{
  navigationOptions: ({ navigation }) => ({
    title: 'ReactNavigation',
    headerLeft: 
      <TouchableOpacity  onPress={() => {navigation.dispatch(DrawerActions.toggleDrawer())} }>
        <MenuImage navigation={navigation}/>
      </TouchableOpacity>,
    }),
  ...navigationOptions
});

const MainNavigator = createAppContainer(createSwitchNavigator(
    {
        SplashScreen: SplashScreen,
    Auth: AuthStack,
    App: DrawerNavigation,
    },
    {
        initialRouteName: "SplashScreen",
    }
));

export default createAppContainer(MainNavigator);