React Native Drawer Navigator全局显示及自定义按钮配置问题

Hey there! Let's tackle your two Drawer Navigator issues one by one—since you're new to React Native, I'll break this down clearly with code examples you can copy and adjust.

The root issue here is your navigation hierarchy right now: you've placed the DrawerNavigator side-by-side with other screens in your StackNavigator, which means screens like JobDetails or JobOrdersList aren't nested inside the drawer's context. Only screens directly under the DrawerNavigator can access its drawer functionality.

Fix steps: #

1. Move all screens that need drawer access inside the DrawerNavigator
2. Keep only non-drawer screens (like Login) at the top level of your StackNavigator

Here's the adjusted code:

Updated Drawer Navigator code:

import { DrawerNavigator } from "react-navigation";
import { View, TouchableOpacity, Text } from "react-native";
// Make sure to import all your screen components first
import WelcomeScreen from "./WelcomeScreen";
import JobListScreen from "./JobListScreen";
import JobDetailsScreen from "./JobDetailsScreen";
import JobOrdersListScreen from "./JobOrdersListScreen";
import TPOScreen from "./TPOScreen";

// Custom drawer content component (for your Logout/Reset buttons)
const CustomDrawerContent = (props) => (
  <View style={{ flex: 1, paddingTop: 50, backgroundColor: "#f5f5f5" }}>
    {/* Logout Button */}
    <TouchableOpacity
      style={{ padding: 15, borderBottomWidth: 1, borderBottomColor: "#ccc" }}
      onPress={() => {
        // Add your actual logout logic here (e.g., clear session, navigate to Login)
        props.navigation.navigate("Login");
        props.navigation.closeDrawer();
      }}
    >
      <Text style={{ fontSize: 16 }}>Logout</Text>
    </TouchableOpacity>
    {/* Reset Button */}
    <TouchableOpacity
      style={{ padding: 15, borderBottomWidth: 1, borderBottomColor: "#ccc" }}
      onPress={() => {
        // Add your reset logic here (e.g., reset app state)
        console.log("Reset action triggered");
        props.navigation.closeDrawer();
      }}
    >
      <Text style={{ fontSize: 16 }}>Reset</Text>
    </TouchableOpacity>
  </View>
);

const AppDrawerNavigator = DrawerNavigator(
  {
    Welcome: { screen: WelcomeScreen },
    JobList: { screen: JobListScreen },
    JobDetails: { screen: JobDetailsScreen },
    JobOrdersList: { screen: JobOrdersListScreen },
    Tpo: { screen: TPOScreen },
  },
  {
    drawerPosition: "right",
    contentComponent: CustomDrawerContent, // Use our custom drawer instead of default
  }
);

export default AppDrawerNavigator;

Updated Stack Navigator (index.js):

import { StackNavigator } from "react-navigation";
import AppDrawerNavigator from "./AppDrawerNavigator";
import LoginScreen from "./LoginScreen";

const Navigator = StackNavigator(
  {
    Login: { screen: LoginScreen },
    Main: { screen: AppDrawerNavigator }, // All drawer-enabled screens live under this
  },
  {
    initialRouteName: "Login", // Start on the Login screen by default
  }
);

export default Navigator;

How to open the drawer from any screen: #

Now any screen inside AppDrawerNavigator can trigger the drawer using:

this.props.navigation.openDrawer();

You can also add a visible menu button to the header of each screen (e.g., in JobDetailsScreen):

class JobDetailsScreen extends Component {
  static navigationOptions = ({ navigation }) => ({
    title: "Job Details",
    headerRight: (
      <TouchableOpacity
        onPress={() => navigation.openDrawer()}
        style={{ marginRight: 15 }}
      >
        <Text>Menu</Text>
      </TouchableOpacity>
    ),
  });

  // Rest of your screen code...
}

Yes, you do need a custom component for this—and we already built it into the code above (CustomDrawerContent). This component replaces the default drawer (which shows all your screen links) with exactly the two buttons you want.

Customization tips: #

• Adjust the style props to match your app's design (add colors, icons, padding, etc.)
• Replace the placeholder console.log in the Reset button with your actual reset logic
• If you need to add more elements later, just insert them inside the main View in CustomDrawerContent

内容的提问来源于stack exchange，提问作者Rohan Koshti