React Native - как управлять заголовками на странице с помощью StackNavigator и DrawerNavigator

Question

Это мой действительный код:

App.js

import React from 'react';
import {StackNavigator} from 'react-navigation';
import DrawerStack from './src/stacks/drawerStack';

const Navigator = StackNavigator({
    drawerStack: {screen: DrawerStack}
}, {
    headerMode: 'screen',
    initialRouteName: 'drawerStack'
})

export default Navigator

knifeStack.js

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;

boxScreen.js

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;

news.js "пример страницы, на которой я хочу управлять настраиваемым заголовком"

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

Пересчет структуры Навигатора таков:

1) (app.js) -> StackNavigator

2) (DrawerStack.js) -> StackNavigator

3)(DrawerScreen.js) -> DrawerNavigator

, что я не могу понять, как правильно объявить

headerMode: 'screen'

в различныхНавигатор для отображения на определенных страницах (например, News.js) определенного пользовательского заголовка.

Answer 1

Измените стиль заголовка, используя navigationOptions, как показано ниже.Вы можете изменить как ваше требованиеПодробнее navigationOptions см. Настройка панели заголовка 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;