React Native获取电池状态/级别使用Native Modules

时间:2017-07-05 08:00:51

标签: react-native batterylevel native-module react-native-native-module

我正在编写一个本机应用程序来获取IOS和Android电池状态。我在网上搜索,发现很少的库可以获得手机的电池电量。

https://github.com/robinpowered/react-native-device-battery

https://github.com/remobile/react-native-battery-status

https://github.com/oojr/react-native-battery

当我尝试使用git hub时,每个库都有问题而对开发人员的支持不多。

任何人都可以为我提供更好的解决方案或库来获取IOS和Android的电池状态。

提前致谢

3 个答案:

答案 0 :(得分:8)

我编写了自己的IOS和Android类来获取电池状态。以下是任何对此感兴趣的步骤,

对于IOS,

  1. 在XCode中打开iOS项目
  2. 创建2个新文件,名为BatteryStatus.h和BatteryStatus.m
  3. BatteryStatus.h文件应包含以下代码

    #import <Foundation/Foundation.h>
    #import <React/RCTBridgeModule.h>
    #import <React/RCTEventEmitter.h>
    
    @interface BatteryStatus : RCTEventEmitter <RCTBridgeModule>
    @end
    

    BatteryStatus.m文件应该

    #import "BatteryStatus.h"
    
    @implementation BatteryStatus
    RCT_EXPORT_MODULE(BatteryStatus)
    
    - (instancetype)init
    {
     if ((self = [super init])) {
    
       [[UIDevice currentDevice] setBatteryMonitoringEnabled:YES];
    
     }
     return self;
    }
    
    RCT_EXPORT_METHOD(hide) {
    }
    
    RCT_EXPORT_METHOD(updateBatteryLevel:(RCTResponseSenderBlock)callback)
    {
     callback(@[[self getBatteryStatus]]);
    }
    
     //manually get battery status by calling following method
    
    -(NSDictionary*)getBatteryStatus
    {
    
     float batteryLevel = [UIDevice currentDevice].batteryLevel;
    
     NSObject* currentLevel = nil;
    
     currentLevel = [NSNumber numberWithFloat:(batteryLevel * 100)];
    
     NSMutableDictionary* batteryData = [NSMutableDictionary dictionaryWithCapacity:2];
    
     [batteryData setObject:currentLevel forKey:@"level"];
     return batteryData;
    
      }
    
    @end
    
    1. 在您的反应原生应用中,在您的js文件中添加以下代码

      import { NativeModules } from 'react-native';
      
      constructor(props) {
       super(props);
       this.state = {
       batteryLevel: null,
       };
      }
      
      componentDidMount() {
        NativeModules.BatteryStatus.updateBatteryLevel((info) => {
        //console.log(info.level)
        const level = Math.ceil(info.level);
        this.setState({ batteryLevel: level});
        });
      }
      
    2. 对于IOS,以上代码对我来说是为了获得电池电量

      对于Android,

      1. 在Android Studio中打开Android项目
      2. 创建一个群组电话BatteryStatus并包含2个名为BatteryStatusModule.java和BatteryStatusPackage.java的文件
      3. BatteryStatusModule.java应包含以下代码

        package com.yourproject.BatteryStatus;
        
        import android.content.Intent;
        import android.content.IntentFilter;
        import android.os.BatteryManager;
        
        import com.facebook.react.bridge.Callback;
        import com.facebook.react.bridge.ReactApplicationContext;
        import com.facebook.react.bridge.ReactContextBaseJavaModule;
        import com.facebook.react.bridge.ReactMethod;
        
        public class BatteryStatusModule extends ReactContextBaseJavaModule  {
             public BatteryStatusModule(ReactApplicationContext reactContext) {
        
                 super(reactContext);
             }
        
             @Override
             public String getName() {
            return "BatteryStatus";
        }
        
        @ReactMethod
        public void getBatteryStatus(Callback successCallback) {
            Intent batteryIntent = getCurrentActivity().registerReceiver(null, new IntentFilter(Intent.ACTION_BATTERY_CHANGED));
            int level = batteryIntent.getIntExtra(BatteryManager.EXTRA_LEVEL, -1);
            int scale = batteryIntent.getIntExtra(BatteryManager.EXTRA_SCALE, -1);
        
            if(level == -1 || scale == -1) {
                level = 0;
            }
            //System.out.print("battery level");
            //System.out.print(level);
            successCallback.invoke(null ,((float)level / (float)scale) * 100.0f);
            }
         }
        

        BatteryStatusPackage.java应包含以下代码

         package com.yourproject.BatteryStatus;
        
         import com.facebook.react.ReactPackage;
         import com.facebook.react.bridge.JavaScriptModule;
         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 BatteryStatusPackage implements ReactPackage {
        @Override
        public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
            List<NativeModule> modules = new ArrayList<>();
        
            modules.add(new BatteryStatusModule(reactContext));
        
            return modules;
        }
        
        @Override
        public List<Class<? extends JavaScriptModule>> createJSModules() {
            return Collections.emptyList();
        }
        
        @Override
        public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
            return Collections.emptyList();
        }
        }
        
        1. 在MainApplication.java中包含以下代码

          @Override
          protected List<ReactPackage> getPackages() {
            return Arrays.<ReactPackage>asList(
                new MainReactPackage(),
                  new MapsPackage(),
                  new BatteryStatusPackage()
            );
          }
          
        2. 在您的反应原生应用中,在您的js文件中添加以下代码

           import { NativeModules } from 'react-native';
          
           constructor(props) {
           super(props);
          
           this.state = {
             batteryLevel: null
           };
          }
          
          getBatteryLevel = (callback) => {
             NativeModules.BatteryStatus.getBatteryStatus(callback);
          }
          
        3. 6.告诉它类似的事情:

          componentDidMount() {
           this.getBatteryLevel((batteryLevel) => {
             console.log(batteryLevel);
           });
          }
          

          对于Android,以上代码对我来说是为了获得电池电量

          希望这有助于某人获得IOS和ANDROID的电池电量

答案 1 :(得分:3)

我们可以使用react-native-device-info来获取任何设备的特定信息。

使用命令安装

npm install --save react-native-device-info

使用getBatteryLevel()以0到1之间的浮点数形式获取设备的电池电量。

DeviceInfo.getBatteryLevel().then(batteryLevel => {
  // 0.759999
});

注意:

在iOS模拟器上返回-1

答案 2 :(得分:1)

正确答案的一些补充。你必须覆盖支持的事件&#39;使用BatteryStatus.m文件中的函数使其工作如下:

-(NSArray<NSString *> *)supportedEvents{ 
  return @[@"level"];
}