react navite 简单原生方法双向调用示例

光影少年2026-09-06 8:13

如果你说的是 React Native 原生模块（Native Modules）双向调用，面试里最简单、最容易讲清楚的就是：

JS → Native：调用原生方法

Native → JS：通过 EventEmitter 主动通知 JS

下面给你一个最小示例。

1. JS 调用 Native

假设 Android 原生提供：

复制代码

public class MyModule extends ReactContextBaseJavaModule {

    public MyModule(ReactApplicationContext context) {
        super(context);
    }

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

    @ReactMethod
    public void hello(String name, Promise promise) {
        promise.resolve("Hello " + name);
    }
}

JS 侧：

复制代码

import {NativeModules} from 'react-native';

const {MyModule} = NativeModules;

async function test() {
  const result = await MyModule.hello('张三');

  console.log(result);
}

调用关系：

复制代码

React Native JS
     │
     │ MyModule.hello()
     ↓
Android Native
     │
     │ promise.resolve()
     ↓
React Native JS

2. Native 主动调用 JS

Native 不能像普通函数一样直接调用 JS，一般使用 DeviceEventEmitter / NativeEventEmitter。

Android：

复制代码

private void sendMessage() {
    getReactApplicationContext()
        .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
        .emit("MyEvent", "Hello from Native");
}

JS：

复制代码

import {DeviceEventEmitter} from 'react-native';

useEffect(() => {
  const subscription = DeviceEventEmitter.addListener(
    'MyEvent',
    data => {
      console.log('收到 Native 消息:', data);
    }
  );

  return () => {
    subscription.remove();
  };
}, []);

调用关系：

复制代码

Android Native
     │
     │ emit("MyEvent")
     ↓
React Native JS
     │
     │ addListener()
     ↓
收到消息

3. 面试直接背这个"双向调用"

复制代码

              React Native JS
             ↗             ↘
      JS 调 Native       Native 通知 JS
          │                   │
          ↓                   ↓
    Native Module        EventEmitter
          │                   │
          ↓                   ↓
       原生方法            JS Listener

一句话回答面试官：

React Native 中 JS 调 Native，通常通过 NativeModules 暴露原生方法；Native 调 JS，通常通过事件机制，比如 DeviceEventEmitter 或 NativeEventEmitter，把消息主动派发给 JS。

如果你要准备 React Native 面试手写题，我也可以继续给你整理一套「JS ↔ Native、Bridge、TurboModule、Fabric」高频题。