React Native Android原生模块方法返回undefined而非字符串问题求助

问题根因 #

React Native 原生模块默认不支持 @ReactMethod 注解的方法直接同步返回值给 JS 侧，所有不带同步标记的原生方法 JS 侧调用默认返回 undefined，返回值只能通过回调、Promise 等异步方式传递。

解决方法 #

方案1：使用Promise异步获取返回值（推荐，适配所有RN版本）

修改Android侧Module类的getData方法，接收Promise参数，通过resolve传递返回值：

import com.facebook.react.bridge.Promise;

@ReactMethod
public void getData(Promise promise) {
    // 异常场景可通过promise.reject()抛出错误
    promise.resolve("AAAAAAAAAAAAAAAAA");
}

JS侧调用方式：

// async/await写法
async function fetchData() {
  const data = await ModuleModule.getData();
  console.log(data); // 输出预期字符串
}

// 或then回调写法
ModuleModule.getData().then(data => {
  console.log(data);
})

方案2：开启同步方法标记（仅适配RN 0.65及以上版本）

如果需要同步调用，给@ReactMethod添加isBlockingSynchronousMethod = true属性即可：

@ReactMethod(isBlockingSynchronousMethod = true)
public String getData() {
    return "AAAAAAAAAAAAAAAAA";
}

JS侧可以直接同步拿到返回值：

const data = ModuleModule.getData();
console.log(data);

排查注意事项 #

• 修改原生代码后必须重新编译运行Android应用，仅刷新JS Bundle不会让原生修改生效
• 确认模块名、方法名大小写完全匹配，没有拼写错误
• 确认NativeModules是从react-native包导入：import { NativeModules } from 'react-native'

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