ReactNative调用Android原生中的权限请求

简介

• 本篇文章从实际开发中，带你去了解怎么从RN端去调用Android原生的请求
• 本篇不是原理分析，只是单纯的贴代码，教你怎么用起来。

具体实现步骤

原生端

• 新建PermissionModule

public class CcPermissionModule extends ReactContextBaseJavaModule {
    public CcPermissionModule(@Nonnull ReactApplicationContext reactContext) {
        super(reactContext);
    }

    @Nonnull
    @Override
    public String getName() {
//此方法返回一个字符串，用于在JS端标记这个模块，方便JS端调用此模块
        return "Permissions";
    }
}

• 新建PermissionPackage

public class CcPermissionPackage implements ReactPackage {
    @Nonnull
    @Override
    public List<NativeModule> createNativeModules(@Nonnull ReactApplicationContext reactContext) {
        return null;
    }

    @Nonnull
    @Override
    public List<ViewManager> createViewManagers(@Nonnull ReactApplicationContext reactContext) {
        return Collections.emptyList();
    }
}

• 新建Activity,加入请求和处理权限结果的方法

//这里我们不做请求和处理的代码讲解，用了简单的伪代码来代替
 public void requestPermission() {
       //请求应用需要的权限
    }

    @Override
    public void onRequestPermissionsResult(int requestCode, @NonNull String[] permissions, @NonNull int[] grantResults) {
        super.onRequestPermissionsResult(requestCode, permissions, grantResults);
        //根据权限申请的结果做处理
    }

• 在PermissionModule中调用Actiivty中的请求权限方法

之前前文说过，PermissionModule中getNames方法是是在Js端标记此模块，那么使用@ReactMethod标记的方法是Js端能调用的，那么就在@ReactMethod标记的方法中去调用Activity中的请求权限方法。

@ReactMethod
    public void requestPermission() {
        MainActivity permissionActivity = (MainActivity) getCurrentActivity();
        //请求权限
        permissionActivity.requestPermission();
    }

• 注册模块PermissionModule类到PermissionPackage中

@Nonnull
    @Override
    public List<NativeModule> createNativeModules(@Nonnull ReactApplicationContext reactContext) {
        List<NativeModule> modules = new ArrayList<>();
        modules.add(new CcPermissionModule(reactContext));
        return modules;
    }

• PermissionPackage在MainApplication中提供下

@Override
        protected List<ReactPackage> getPackages() {
            return Arrays.<ReactPackage>asList(
                  new PermissionPackage()
            );
        }

自此原生端要做的工作已经全部做了，接下来就是到JS端调用原生端的代码

JS 端

• 方便调用原生模块，将JS的调用端独立封装下

import { NativeModules } from 'react-native';
//这里面Permissions就是PermissionModule中getNames返回的字符串，用于在Js端标记此模块
export default NativeModules.Permissions;

• 在JS端开始调用原生端请求权限的方法。

import Permissionz from 'components/Permissions';
//在componentDidMount中调用
componentDidMount(){
  //requestPermission就是PermissionModule中使用@ReactModule标记的方法
  Permissions.requestPermission()
}

结语

最近项目中使用的是混合开发，各种原生调JS和JS调原生，刚开始还有点不适应，当写多了，就好多了！写这篇文章目的就是方便以后查阅更方便，如果这篇文章帮助到了你，可否点个关注呢？