React Native自定义Native Modules调用返回null问题求助

问题描述 #

使用React Native 0.70按照官方文档创建自定义原生模块，已完成模块注册，但通过NativeModules.CalendarModule访问时返回null。相关代码及环境如下：

MyAppPackage.java #

package com.XXX; // replace your-app-name with your app’s name
import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.JavaScriptModule;
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 MyAppPackage implements ReactPackage {
   @Override
   public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
       return Collections.emptyList();
   }

   @Override
   public List<NativeModule> createNativeModules(
           ReactApplicationContext reactContext) {
       List<NativeModule> modules = new ArrayList<>();

       modules.add(new CalendarModule(reactContext));

       return modules;
   }

}

CalendarModule.java #

package com.xxx; // replace com.your-app-name with your app’s name
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
import java.util.Map;
import java.util.HashMap;

public class CalendarModule extends ReactContextBaseJavaModule {
    CalendarModule(ReactApplicationContext context) {
        super(context);
    }
    
    @Override
    public String getName() {
        return "Calendar";
    }

}

MainApplication.java #

@Override
protected List<ReactPackage> getPackages() {
  @SuppressWarnings("UnnecessaryLocalVariable")
  List<ReactPackage> packages = new PackageList(this).getPackages();
  packages.add(new MyAppPackage());
  // Packages that cannot be autolinked yet can be added manually here, for example:
  return packages;
}

App.tsx #

import { NativeModules } from 'react-native';
const { CalendarModule } = NativeModules;
console.log({ CalendarModule })

问题原因及解决方案 #

1. 模块名称不匹配 #

CalendarModule类中getName()方法返回的是"Calendar"，但JS代码中尝试访问的是NativeModules.CalendarModule，两者名称不一致。React Native会通过getName()返回的字符串作为模块在JS中的键名。

修复方案：

• 要么修改CalendarModule的getName()返回值为"CalendarModule"：

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

• 要么修改JS代码中访问的名称为Calendar：

const { Calendar } = NativeModules;
console.log({ Calendar })

2. Java包名大小写不匹配 #

MyAppPackage.java的包名是com.XXX，而CalendarModule.java的包名是com.xxx，Java语言中包名是大小写敏感的，这会导致MyAppPackage无法正确找到并实例化CalendarModule类。

修复方案：
统一两个文件的包名，保持大小写一致，建议遵循Java包名小写的规范，比如都改为com.xxx。

3. 未重新编译原生项目 #

修改Java代码后，热重载（Hot Reload）不会生效，必须重新编译Android项目才能让新的原生模块生效。

修复方案：
停止当前运行的项目，执行以下命令重新编译运行：

npx react-native run-android

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