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

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

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＆＃34;我要管理自定义标题的页面示例＆＃34;

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） - ＆gt; StackNavigator

2）（DrawerStack.js） - ＆gt; StackNavigator

3）（DrawerScreen.js） - ＆gt; DrawerNavigator

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

headerMode：＆＃39; screen＆＃39;

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

Answer 1

使用navigationOptions更改标题样式，如下所示。您可以根据需要进行更改。有关navigationOptions的详细信息，请参阅React Navigation的Configuring the header bar。

 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管理每页的标头

1 个答案: