React Native原生模块报错：Bridge module %@ does not conform to RCTBridgeModule

嘿，作为刚接触React Native原生模块的新手，这个报错其实挺常见的！我帮你分析下问题根源，再给你修正后的代码：

错误原因 #

你让BatteryStatus继承了RCTEventEmitter，但没有实现RCTEventEmitter要求的强制方法supportedEvents。虽然你目前只是想通过方法回调获取电池状态，不需要发送事件，但只要继承了RCTEventEmitter，就必须实现这个方法来符合协议规范，否则React Native的桥接层就会判定你的类不符合RCTBridgeModule协议，抛出这个报错。

修正后的原生代码 #

BatteryStatus.m（关键修改部分） #

在@implementation BatteryStatus里添加supportedEvents方法，同时可以给电池状态获取加个容错处理（避免监控未开启时返回-1的情况）：

#import "BatteryStatus.h"
#import <UIKit/UIKit.h> // 别忘了导入UIKit，不然UIDevice会报错

@implementation BatteryStatus
RCT_EXPORT_MODULE(BatteryStatus)

- (instancetype)init {
  if ((self = [super init])) {
    [[UIDevice currentDevice] setBatteryMonitoringEnabled:YES];
  }
  return self;
}

// 必须实现的方法，哪怕不需要发送事件，返回空数组即可
- (NSArray<NSString *> *)supportedEvents {
  return @[];
}

RCT_EXPORT_METHOD(hide) {
}

RCT_EXPORT_METHOD(updateBatteryLevel:(RCTResponseSenderBlock)callback) {
  callback(@[[self getBatteryStatus]]);
}

-(NSDictionary*)getBatteryStatus {
  float batteryLevel = [UIDevice currentDevice].batteryLevel;
  // 容错：当电池监控未开启时，batteryLevel会返回-1
  NSNumber* currentLevel;
  if (batteryLevel == -1) {
    currentLevel = @-1;
  } else {
    currentLevel = [NSNumber numberWithFloat:(batteryLevel * 100)];
  }
  NSMutableDictionary* batteryData = [NSMutableDictionary dictionaryWithCapacity:2];
  [batteryData setObject:currentLevel forKey:@"level"];
  return batteryData;
}

@end

额外注意点 #

• 确保你的BatteryStatus.h里的导入是正确的，你当前的写法没问题：

#import <Foundation/Foundation.h>
#import <React/RCTBridgeModule.h>
#import <React/RCTEventEmitter.h>

@interface BatteryStatus : RCTEventEmitter <RCTBridgeModule>
@end

React Native端代码优化 #

可以给回调加个简单的容错，避免info为空的情况：

import { Text, View, NativeModules } from 'react-native';
import React, { Component } from 'react';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      batteryLevel: null,
    };
  }

  componentDidMount() {
    NativeModules.BatteryStatus.updateBatteryLevel((info) => {
      // 容错处理
      if (!info || info.level === -1) {
        console.log('无法获取电池状态');
        return;
      }
      console.log(info.level);
      const level = Math.ceil(info.level);
      this.setState({ batteryLevel: level });
    });
  }

  render() {
    return (
      <View>
        <Text>当前电量：{this.state.batteryLevel ?? '获取中...'}</Text>
      </View>
    );
  }
}

export default App;

总结 #

这个报错的核心就是继承RCTEventEmitter必须实现supportedEvents方法，哪怕你不需要用它的事件发送功能。添加这个方法后，桥接层就能正确识别你的原生模块了，再配合一些容错处理，就能正常获取电池状态啦！

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