9

我正在react-navigation-drawer从 React 导航库实现。但面临与标题相关的问题。标题栏未显示在任何屏幕中。

这是我的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;

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

4

4 回答 4

12

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

您可以在文档中的嵌套导航器中找到有关屏幕导航的信息，您可以在 Snack 上尝试此示例

于 2020-02-26T23:50:52.557 回答
9

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

const DrawerNavigator = createDrawerNavigator(
  RouteConfigs,
  DrawerNavigatorConfig
);

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

const Stacks = createAppContainer(Root)

export default Stacks;

屏幕

于 2019-09-15T15:31:10.393 回答
7

Since December 2020 you can now use the headerShown: true setting in screenOptions of your Drawer.Navigator to show the header in React Navigation 5.

See more about this issue here: https://github.com/react-navigation/react-navigation/issues/1632

See the commit and comments about the new feature in React Navigation 5 here

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

于 2021-04-08T10:36:50.560 回答
0

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

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

好消息是它是完全定制的。

请在下面查看我的代码。

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 中分配 this

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;
于 2020-03-19T10:45:57.677 回答