如何更新react-native-navigation的Drawer实例？菜单显示及渲染问题

Hey there! Let's work through this drawer menu issue you're facing with react-native-navigation. I’ve dealt with similar scenarios before, so here’s a breakdown of what’s going wrong and how to fix it:

When you initialize your app with startSingleScreenApp, react-native-navigation mounts a global drawer container tied to your root navigation setup. Creating a brand new drawer instance won’t replace the existing one— the framework doesn’t automatically re-render the entire drawer container, which is why your new menu items aren’t showing up.

Instead of making multiple drawer instances, you should reuse the same drawer container and modify its menu items on the fly. Here are two reliable methods to do this:

Method 1: Screen event listeners + state management #

This approach uses a stateful drawer component that listens for screen changes and updates its menu items accordingly:

Step 1: Create a dynamic drawer component #

// DrawerContent.js
import React, { useState, useEffect } from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import { Navigation } from 'react-native-navigation';

const DrawerContent = () => {
  const [currentScreen, setCurrentScreen] = useState('Home');
  const [menuItems, setMenuItems] = useState([]);

  useEffect(() => {
    // Listen for when any screen finishes appearing
    const screenAppearListener = Navigation.events().registerComponentDidAppearListener(({ componentName }) => {
      setCurrentScreen(componentName);
      updateMenuItems(componentName);
    });

    // Initialize menu items for the starting screen
    updateMenuItems(currentScreen);

    // Clean up the listener when the component unmounts
    return () => screenAppearListener.remove();
  }, []);

  // Update menu items based on the active screen
  const updateMenuItems = (screenName) => {
    let items = [];
    switch(screenName) {
      case 'Home':
        items = [
          { id: 'profile', label: 'My Profile', screen: 'Profile' },
          { id: 'settings', label: 'Settings', screen: 'Settings' },
          { id: 'logout', label: 'Logout', screen: 'Login' }
        ];
        break;
      case 'Profile':
        items = [
          { id: 'home', label: 'Back to Home', screen: 'Home' },
          { id: 'settings', label: 'Settings', screen: 'Settings' }
          // Hide Logout for this screen
        ];
        break;
      default:
        items = [
          { id: 'home', label: 'Home', screen: 'Home' },
          { id: 'settings', label: 'Settings', screen: 'Settings' }
        ];
    }
    setMenuItems(items);
  };

  const navigateToScreen = (screen) => {
    Navigation.push(currentScreen, {
      component: { name: screen }
    });
    Navigation.closeDrawer();
  };

  return (
    <View style={{ flex: 1, paddingTop: 50 }}>
      {menuItems.map(item => (
        <TouchableOpacity 
          key={item.id} 
          style={{ padding: 15, borderBottomWidth: 1, borderBottomColor: '#eee' }}
          onPress={() => navigateToScreen(item.screen)}
        >
          <Text>{item.label}</Text>
        </TouchableOpacity>
      ))}
    </View>
  );
};

export default DrawerContent;

Step 2: Link the drawer to your app initialization #

When you call startSingleScreenApp, assign your dynamic drawer component as the left drawer content:

Navigation.startSingleScreenApp({
  screen: {
    screen: 'Home', // Your initial screen
    title: 'Home'
  },
  drawer: {
    left: {
      screen: 'DrawerContent' // Reference your drawer component here
    }
  }
});

Method 2: Update drawer props directly via Navigation API #

If you prefer not to use state management, you can use Navigation.updateDrawerProps to pass updated menu items to your drawer when screens change:

Step 1: Update props from your screen components #

In the screens where you want to modify the drawer, call updateDrawerProps in the appropriate lifecycle hook:

// In ProfileScreen.js
componentDidMount() {
  // Update drawer menu when entering Profile screen
  Navigation.updateDrawerProps('left', {
    passProps: {
      menuItems: [
        { id: 'home', label: 'Back to Home', screen: 'Home' },
        { id: 'settings', label: 'Settings', screen: 'Settings' }
      ]
    }
  });
}

componentWillUnmount() {
  // Reset menu when leaving Profile screen
  Navigation.updateDrawerProps('left', {
    passProps: {
      menuItems: [
        { id: 'profile', label: 'My Profile', screen: 'Profile' },
        { id: 'settings', label: 'Settings', screen: 'Settings' },
        { id: 'logout', label: 'Logout', screen: 'Login' }
      ]
    }
  });
}

Step 2: Render menu items from passProps in your drawer #

Modify your drawer component to use the props passed in:

// DrawerContent.js
import React from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import { Navigation } from 'react-native-navigation';

const DrawerContent = (props) => {
  const { menuItems } = props;

  const navigateToScreen = (screen) => {
    Navigation.push(props.componentId, {
      component: { name: screen }
    });
    Navigation.closeDrawer();
  };

  return (
    <View style={{ flex: 1, paddingTop: 50 }}>
      {menuItems.map(item => (
        <TouchableOpacity 
          key={item.id} 
          style={{ padding: 15, borderBottomWidth: 1, borderBottomColor: '#eee' }}
          onPress={() => navigateToScreen(item.screen)}
        >
          <Text>{item.label}</Text>
        </TouchableOpacity>
      ))}
    </View>
  );
};

export default DrawerContent;

• Don’t create multiple drawer instances: React-native-navigation’s drawer is tied to your root navigation stack. Creating duplicates will cause conflicts, not replace the existing drawer.
• Clean up event listeners: Always remove registerComponentDidAppearListener when your drawer unmounts to prevent memory leaks.
• Use the right lifecycle hooks: If using updateDrawerProps, call it in componentDidMount or componentDidAppear (not componentWillMount) to ensure the drawer receives the updated props correctly.

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