标题没有显示在反应-导航-抽屉反应-本机

Question

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

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

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

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 --这是一个简单的反应导航解决方案：

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

您可以在文档和你可以在零食上试试这个例子。中的嵌套导航器中找到对屏幕的导航。

Answer 3

从2020年12月开始，您现在可以在您的headerShown: true的screenOptions中使用Drawer.Navigator设置来显示ReactiveNavigation5中的标题。

请参阅有关此问题的更多信息：https://github.com/react-navigation/react-navigation/issues/1632

请参阅ReactiveNavigation5中有关新特性的提交和注释

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