Javascript React Native-如何使用StackNavigator和DrawerNavigator管理每页的页眉

这是我的实际代码：

App.js

drawerStack.js

news.js“我想管理自定义标题的页面示例”

从“React”导入React；
从“react native”导入{Text，View}；
导出默认类News.Component{
静态导航选项={
标题：“新闻标题”，
左校长：(
警报（'这是一个类似hamburgher的示例按钮！'）}
title=“=”
/>
)
};
render（）{
返回(
这里留下消息！！
);
}
}

概括导航器的结构如下：

1） （app.js）->StackNavigator

2） （DrawerStack.js）->StackNavigator

3） （DrawerScreen.js）->DrawerNavigator

我不明白的是如何正确申报

headerMode:“屏幕”

---

在各种导航器中，在某些页面（例如News.js）上显示特定的自定义标题。

使用

导航选项更改标题样式，如下所示。您可以根据需要进行更改。有关导航选项的更多信息，请参见React Navigation

 import {DrawerNavigator} from 'react-navigation'
 import Home from '../components/home';
 import Login from '../components/login';
 import Contacts from '../components/contacts';
 import News from '../components/news';

 const DrawerScreen = DrawerNavigator({
               Home: {screen: Home},
               Login: {screen: Login},
               Contacts: {screen: Contacts},
               News: {
                       screen: News,
                       navigationOptions: {
                         title: "News",
                         headerTitleStyle: {
                              color: "white"
                             },
                         headerStyle: {
                              backgroundColor: "red"
                              },
                         headerBackTitle: null,
                         headerTintColor: "white"
                         }
                     }
             },{
               headerMode: 'screen',
               initialRouteName: 'Home'
            })

 export default DrawerScreen;

我试过了，但是没有改变任何事情。。。问题是，App.js中的createStackNavigator似乎“凌驾于一切之上”，即使页面或DroperScreen.js中的特定标题未被考虑在内……有一种方法可以再次使用DroperNavigator来完成这一切，然后可以为各个页面安排标题？
import React from 'react'
import {StackNavigator, DrawerActions} from "react-navigation";
import {Text, View, TouchableOpacity} from 'react-native';
import Home from "../components/home";
import DrawerScreen from "./drawerScreen";

const DrawerNavigation = StackNavigator({
    DrawerStack: {screen: DrawerScreen}
}, {
    headerMode: 'none',
    // navigationOptions: ({navigation}) => ({
    //    headerStyle: {
    //        backgroundColor: 'rgb(255,45,85)',
    //        paddingLeft: 10,
    //        paddingRight: 10
    //    },
    //    title: 'Home',
    //    headerTintColor: 'white',
    //    headerLeft: <View>
    //        <TouchableOpacity
    //            onPress={() => {
    //                if (navigation.state.isDrawerOpen === false) {
    //                    navigation.dispatch(DrawerActions.openDrawer());
    //                } else {
    //                    navigation.dispatch(DrawerActions.closeDrawer());
    //                }
    //            }}>
    //            <Text>Menu</Text>
    //        </TouchableOpacity>
    //    </View>
    // })
})

export default DrawerNavigation;

import {DrawerNavigator} from 'react-navigation'
import Home from '../components/home';
import Login from '../components/login';
import Contacts from '../components/contacts';
import News from '../components/news';

const DrawerScreen = DrawerNavigator({
    Home: {screen: Home},
    Login: {screen: Login},
    Contacts: {screen: Contacts},
    News: {screen: News}
}, {
    headerMode: 'screen',
    initialRouteName: 'Home'
})

export default DrawerScreen;

import React from "react";
import {Text, View} from 'react-native';

export default class News extends React.Component {
static navigationOptions = {
    headerTitle: 'News Header',
    headerLeft: (
        <Button
            onPress={() => alert('This is an example button like hamburgher!')}
            title="="
        />
    )
};
    render() {

        return (
            <View>
                <Text> Here Leave the News!! </Text>
            </View>
        );
    }
}

 import {DrawerNavigator} from 'react-navigation'
 import Home from '../components/home';
 import Login from '../components/login';
 import Contacts from '../components/contacts';
 import News from '../components/news';

 const DrawerScreen = DrawerNavigator({
               Home: {screen: Home},
               Login: {screen: Login},
               Contacts: {screen: Contacts},
               News: {
                       screen: News,
                       navigationOptions: {
                         title: "News",
                         headerTitleStyle: {
                              color: "white"
                             },
                         headerStyle: {
                              backgroundColor: "red"
                              },
                         headerBackTitle: null,
                         headerTintColor: "white"
                         }
                     }
             },{
               headerMode: 'screen',
               initialRouteName: 'Home'
            })

 export default DrawerScreen;