javascript - React Native - 如何使用 StackNavigator 和 DrawerNavigator 管理每页的标题

Question

这是我的实际代码：

应用程序.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

抽屉堆栈.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;

抽屉屏幕.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>
        );
    }
}

概括一下 Navigator 的结构是这样的：

1) (app.js) -> StackNavigator

2) (DrawerStack.js) -> StackNavigator

3) (DrawerScreen.js) -> DrawerNavigator

我无法理解的是如何正确声明

headerMode：'屏幕'

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

标签： javascriptandroidreact-nativenavigation-drawerreact-navigation

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;