React Native创建的导航抽屉如何在iOS/Android原生屏幕上显示

Hey there! Since you're new to React Native and building a hybrid app (mixing RN, Swift, and Java screens), let's break down how to show the react-navigation drawer from your native pages. The core idea is setting up a communication bridge between your native code and React Native, so your native buttons can tell RN to open the drawer.

Step 1: Configure React Native Side #

First, make sure your drawer navigation is set up correctly, and expose a way for native code to trigger the drawer. We'll use a navigation ref and a native module bridge to handle this.

1.1 Set up Navigation Ref #

Create a global navigation ref to control the drawer from anywhere in your RN code:

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { NativeModules, NativeEventEmitter } from 'react-native';

const Drawer = createDrawerNavigator();

function App() {
  // Global ref to access navigation actions
  const navigationRef = React.useRef(null);

  React.useEffect(() => {
    // Option 1: Use a callback from native module
    NativeModules.DrawerBridge.setDrawerOpenCallback(() => {
      navigationRef.current?.openDrawer();
    });

    // Option 2: Listen for native events (alternative approach)
    const eventEmitter = new NativeEventEmitter(NativeModules.DrawerBridge);
    const drawerSubscription = eventEmitter.addListener('openDrawer', () => {
      navigationRef.current?.openDrawer();
    });

    // Cleanup subscription on unmount
    return () => drawerSubscription.remove();
  }, []);

  return (
    <NavigationContainer ref={navigationRef}>
      <Drawer.Navigator initialRouteName="RNHome">
        {/* Add your RN screens here */}
        <Drawer.Screen name="RNHome" component={YourRNHomeScreen} />
        {/* If you navigate to native screens via RN, use a wrapper component */}
        <Drawer.Screen name="NativeScreen" component={NativeScreenWrapper} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

export default App;

Step 2: iOS (Swift) Implementation #

We'll create a native module to bridge Swift and RN, then call it from your native view controller.

2.1 Create the RN Bridge Module #

Add a new Swift file to your iOS project (e.g., DrawerBridge.swift):

import Foundation
import React

@objc(DrawerBridge)
class DrawerBridge: NSObject, RCTBridgeModule {
  // Name of the module (matches what we use in RN's NativeModules)
  static func moduleName() -> String! {
    return "DrawerBridge"
  }

  static func requiresMainQueueSetup() -> Bool {
    return true
  }

  // Store the callback from RN
  private var openDrawerCallback: RCTResponseSenderBlock?

  // Expose method to RN to set the callback
  @objc func setDrawerOpenCallback(_ callback: @escaping RCTResponseSenderBlock) {
    openDrawerCallback = callback
  }

  // Method to trigger drawer (call this from your native code)
  @objc func triggerOpenDrawer() {
    openDrawerCallback?([])
  }

  // Alternative: Send an event to RN (if you prefer event-based approach)
  @objc func sendOpenDrawerEvent() {
    guard let bridge = RCTBridge.current() else { return }
    bridge.eventDispatcher().sendAppEvent(withName: "openDrawer", body: nil)
  }
}

2.2 Call the Bridge from Your Native View Controller #

In your Swift ViewController (where you have the menu button), add this code to trigger the drawer:

@IBAction func menuButtonTapped(_ sender: UIButton) {
  // Get the bridge module instance
  if let drawerBridge = RCTBridge.current()?.module(for: DrawerBridge.self) as? DrawerBridge {
    // Use either callback or event approach
    drawerBridge.triggerOpenDrawer()
    // drawerBridge.sendOpenDrawerEvent()
  }
}

Note: Make sure your native screen is running within the RN context (i.e., the RCTBridge instance exists). If you're opening a native screen from RN, this should work automatically.

Step 3: Android (Java) Implementation #

Similar to iOS, we'll create a native module and register it, then call it from your Activity.

3.1 Create the RN Bridge Module #

Add a new Java class to your Android project (e.g., DrawerBridgeModule.java):

import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
import com.facebook.react.bridge.Callback;
import com.facebook.react.modules.core.DeviceEventManagerModule;

public class DrawerBridgeModule extends ReactContextBaseJavaModule {
  private Callback openDrawerCallback;

  public DrawerBridgeModule(ReactApplicationContext reactContext) {
    super(reactContext);
  }

  @Override
  public String getName() {
    return "DrawerBridge";
  }

  // Expose method to RN to set the callback
  @ReactMethod
  public void setDrawerOpenCallback(Callback callback) {
    this.openDrawerCallback = callback;
  }

  // Method to trigger drawer (call this from native code)
  public void triggerOpenDrawer() {
    if (openDrawerCallback != null) {
      openDrawerCallback.invoke();
    }
  }

  // Alternative: Send event to RN
  public void sendOpenDrawerEvent() {
    getReactApplicationContext()
      .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
      .emit("openDrawer", null);
  }
}

3.2 Create a Package to Register the Module #

Add a new Package class (e.g., DrawerBridgePackage.java):

import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;
import java.util.ArrayList;
import java.util.Collections;
import java.util.List;

public class DrawerBridgePackage implements ReactPackage {
  @Override
  public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
    List<NativeModule> modules = new ArrayList<>();
    modules.add(new DrawerBridgeModule(reactContext));
    return modules;
  }

  @Override
  public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
    return Collections.emptyList();
  }
}

3.3 Register the Package in MainApplication #

Open MainApplication.java and add the package to the list:

@Override
protected List<ReactPackage> getPackages() {
  List<ReactPackage> packages = new PackageList(this).getPackages();
  // Add our custom package
  packages.add(new DrawerBridgePackage());
  return packages;
}

3.4 Trigger Drawer from Your Native Activity #

In your Java Activity, call the module when the menu button is tapped:

public void onMenuButtonClicked(View view) {
  ReactInstanceManager reactInstanceManager = getReactNativeHost().getReactInstanceManager();
  ReactApplicationContext reactContext = reactInstanceManager.getCurrentReactContext();
  
  if (reactContext != null) {
    DrawerBridgeModule drawerModule = reactContext.getNativeModule(DrawerBridgeModule.class);
    drawerModule.triggerOpenDrawer();
    // drawerModule.sendOpenDrawerEvent();
  }
}

Key Tips for React Native Newbies #

• Double-check dependencies: Make sure you've installed all required react-navigation dependencies (react-native-gesture-handler, react-native-reanimated, etc.) and linked them correctly.
• Test RN first: Confirm the drawer works properly in your RN screens before adding native communication.
• Bridge instance availability: If your native screen is completely independent of RN, you'll need to pass the RCTBridge (iOS) or ReactInstanceManager (Android) to the screen to ensure communication works.
• Debugging: Use RN's debugger to check if the callback/event is being received, and native logs to confirm the bridge method is called.

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