Header 未显示在 react-navigation-drawer React-Native 中

Question

我正在从 React Navigation Library 中实现 react-navigation-drawer。但面临与 header 有关的问题。 header 栏未显示在任何屏幕中。

这是我的App.js

import React from "react";
import { StyleSheet, ScrollView, View } from "react-native";
//import DrawerNavigator from "./navigation/DrawerNavigator";
import { Platform, Dimensions } from "react-native";
import { createAppContainer } from "react-navigation";
import { createDrawerNavigator } from "react-navigation-drawer";
import Home from "./components/home";
import Contact from "./components/contact";

const WIDTH = Dimensions.get("window").width;
const RouteConfigs = {
  Home: {
    screen: Home
  },
  Contact: {
    screen: Contact
  }
};
const DrawerNavigatorConfig = {
  drawerWidth: WIDTH * 0.75,
  drawerType: "both",
  initialRouteName: "Home"
};
const DrawerNavigator = createDrawerNavigator(
  RouteConfigs,
  DrawerNavigatorConfig
);

const MyApp = createAppContainer(DrawerNavigator);

export default class App extends React.Component {
  render() {
    return <MyApp />;
  }
}

这是我的 home screen

import React, { Component } from "react";
import { View, Image, Text, StyleSheet, ScrollView } from "react-native";
import { FontAwesomeIcon } from "@fortawesome/react-native-fontawesome";
import { faTruck, faHome } from "@fortawesome/free-solid-svg-icons";

class Home extends Component {
  static navigationOptions = {
    headerTitle: "Home",
    drawerIcon: ({ tintColor }) => <FontAwesomeIcon size={25} icon={faHome} />
  };
  render() {
    return (
      <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
        <Text>Home Screen</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#F5F5F5",
    flexDirection: "column"
  },
  icon: {
    width: 24,
    height: 24
  }
});

export default Home;

谁能帮帮我。提前致谢！！！

Answer 1

抽屉导航器不包含headers。堆栈导航器必须配置为显示 headers.

const DrawerNavigator = createDrawerNavigator(
  RouteConfigs,
  DrawerNavigatorConfig
);

const Root = createStackNavigator({
  Main: { screen : DrawerNavigator}
},
{
  defaultNavigationOptions : ({ navigation }) => ({
      title: "Screen"
    })
})

const Stacks = createAppContainer(Root)

export default Stacks;

Answer 2

@hongdeveloper 这是反应导航 5 的简单示例解决方案：

function Root() {
  return (
    <Stack.Navigator>
      <Stack.Screen options={{title: "Profile"}} name="Profile" component={Profile} />
      <Stack.Screen options={{title: "Settings"}} name="Settings" component={Settings} />
    </Stack.Navigator>
  );
}

function App() {
  return (
    <NavigationContainer>
      <Drawer.Navigator>
        <Drawer.Screen name="Home" component={Home} />
        <Drawer.Screen name="Root" component={Root} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

您可以在 docs and you can try this example on Snack

中找到有关在嵌套导航器中导航到屏幕的信息

Answer 3

回复晚了，但我用下面的代码做到了。

我为每个屏幕创建了单独的堆栈导航器，然后在抽屉导航器中添加了所有堆栈导航器。

好在它是完全定制的。

请看下面我的代码。

const WIDTH = Dimensions.get('window').width;

  const HomeNavigator = createStackNavigator(
    {
      Home: Home
    },
    {
      defaultNavigationOptions: ({ navigation }) => {
        return {
          headerStyle: {
            backgroundColor: '#1e89f4'
          },
          headerTitle: 'Knowledge Woledge',
          headerTintColor: '#fff',
          headerTitleStyle: {
            fontWeight: 'bold',
            textAlign: 'center',
            flex: 1
          },
          headerLeft: (
            <View style={{ paddingLeft: 13 }}>
              <FontAwesomeIcon
                size={25}
                color='#fff'
                icon={faBars}
                onPress={() => navigation.openDrawer()}
              />
            </View>
          ),
          headerRight: <View />
        };
      }
    }
  );

  const DetailNavigator = createStackNavigator(
    {
      PostDetail: PostDetail
    },
    {
      defaultNavigationOptions: ({ navigation }) => {
        return {
          headerStyle: {
            backgroundColor: '#1e89f4'
          },
          headerTitle: () => {
            return (
              <Text
                style={{
                  color: '#fff',
                  fontWeight: 'bold',
                  textAlign: 'center',
                  flex: 1,
                  fontSize: 20
                }}
              >
                {navigation.getParam('headerTitle')}
              </Text>
            );
          },
          headerTintColor: '#fff',
          headerTitleStyle: {
            fontWeight: 'bold',
            textAlign: 'center',
            flex: 1
          },
          headerLeft: (
            <View style={{ paddingLeft: 13 }}>
              <FontAwesomeIcon
                size={25}
                color='#fff'
                icon={faArrowLeft}
                onPress={() => navigation.goBack(null)}
              />
            </View>
          ),
          headerRight: <View />
        };
      }
    }
  );

在常量中赋值

const RouteConfigs = {
    Home: {
      screen: HomeNavigator,
      navigationOptions: {
        drawerLabel: 'Home',
        drawerIcon: ({ tintColor }) => (
          <FontAwesomeIcon size={20} color={tintColor} icon={faHome} />
        )
      }
    },
    Detail: {
      screen: DetailNavigator,
      navigationOptions: {
        drawerLabel: () => {
          return null;
        }
      }
    }
  };

最后，用这个创建一个抽屉导航器。

const DrawerNavigatorConfig = {
    drawerWidth: WIDTH * 0.75,
    drawerType: 'both',
    initialRouteName: 'Home'
  };
  const DrawerNavigator = createDrawerNavigator(
    RouteConfigs,
    DrawerNavigatorConfig
  );

  const Stacks = createAppContainer(DrawerNavigator);

  export default Stacks;

Answer 4

自 2020 年 12 月起，您现在可以使用 Drawer.Navigator 的 screenOptions 中的 headerShown: true 设置在 React Navigation 5 中显示 header。

在此处查看有关此问题的更多信息：https://github.com/react-navigation/react-navigation/issues/1632

在此处查看有关 React Navigation 5 中新功能的提交和评论

https://github.com/react-navigation/react-navigation/commit/dbe961ba5bb243e8da4d889c3c7dd6ed1de287c4

Header 未显示在 react-navigation-drawer React-Native 中

Header is not showing in react-navigation-drawer React-Native

react-native

react-navigation

react-navigation-drawer