简介
- 本篇文章从实际开发中，带你去了解怎么从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调原生，刚开始还有点不适应，当写多了，就好多了！写这篇文章目的就是方便以后查阅更方便，如果这篇文章帮助到了你，可否点个关注呢？
