React Native-如何使用StackNavigator和DrawerNavigator管理每页的页眉 [英] React Native - how to manage headers per page with StackNavigator and DrawerNavigator

问题描述

这是我的实际代码:

App.js

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

drawerStack.js

drawerStack.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;

drawerScreen.js

drawerScreen.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我要管理自定义标题的页面示例"

news.js "example of a page where I want to manage a custom header"

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

概括导航器的结构是这样的:

recapitulating the structure of the Navigator is this:

1)(app.js)-> StackNavigator

1) (app.js) -> StackNavigator

2)(DrawerStack.js)-> StackNavigator

2) (DrawerStack.js) -> StackNavigator

3)(DrawerScreen.js)-> DrawerNavigator

3) (DrawerScreen.js) -> DrawerNavigator

我不明白的是如何正确声明

what I can not understand is how to declare correctly

headerMode:屏幕"

headerMode: 'screen'

在各种导航器中显示特定页面(例如News.js)的特定自定义标题.

in the various Navigator to show on certain pages (example News.js) a specific custom header.

推荐答案

使用navigationOptions更改标题样式，如下所示.您可以根据需要进行更改.有关更多navigationOptions的信息，请参见配置React Navigation的标题栏.

Change header style using navigationOptions as below. You can change as your requirement. For more navigationOptions see Configuring the header bar of 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;

这篇关于React Native-如何使用StackNavigator和DrawerNavigator管理每页的页眉的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！