ReactNative之原生模块的开发（Android）学习笔记-飞外

我们在用RN开发App的时候，有时候需要用到一些原生模块，比如：分享、第三方登录等。在RN的官方文档是这样谈到的：

“有时候App需要访问平台API，但在React Native可能还没有相应的模块。或者你需要复用一些Java代码，而不想用JavaScript再重新实现一遍；又或者你需要实现某些高性能的、多线程的代码，譬如图片处理、数据库、或者一些高级扩展等等。 ”

我们所要做的事情很简单，在RN组件中，点击一个按钮，触发原生模块中的我们所编写的事件，获取当前时间并显示

如下图

在android/app/src/main/java/下创建com.myNativeModule这样一个package（项目结构如下图）

在android/app/src/main/java/com/myNativeModule目录下新建一个TextModule.java。在这个类中，我们实现了具体的逻辑功能。

package com.myNativeModule;import android.content.Context;import android.util.Log;import android.widget.Toast;import java.text.SimpleDateFormat;import java.util.Date;public class TextModule { public void getTime(Context ctx) { SimpleDateFormat formatDate=new SimpleDateFormat("yyyy年MM月dd日 HH:mm:ss"); Date date=new Date(System.currentTimeMillis()); //获取当前时间 String s=formatDate.format(date); Log.e("HHH",s); Toast.makeText(ctx,s,Toast.LENGTH_SHORT).show();

实现了获取当前时间功能后，我们接下来就要暴露给React Native，以供js调用。

接下来我们就要向React Native暴露接口以及做一些数据交互部分的操作。为了暴露接口以及进行数据交互我们需要借助React Native的ReactContextBaseJavaModule 类。

(在android/app/src/main/java/com/myNativeModule目录下新建一个MyNativeModule.java。)

package com.myNativeModule;import android.content.Context;import android.widget.Toast;import com.facebook.react.bridge.ReactApplicationContext;import com.facebook.react.bridge.ReactContextBaseJavaModule;import com.facebook.react.bridge.ReactMethod;public class MyNativeModule extends ReactContextBaseJavaModule { private Context mContext; public MyNativeModule(ReactApplicationContext reactContext) { super(reactContext); mContext = reactContext; // 重载了getName()方法，用来暴露我们原生模块的名字 @Override  public String getName() { return "MyNativeModule"; // 返回的这个名字是必须的，是Native暴露给JS的名字 // 通过@ReactMethod注解来暴露接口，这样以来我们就可以在js文件中通过MyNativeModule.rnCallNative()来调用我们暴露给RN的接口了 // 不能有返回值，因为被调用的原生代码是异步的，原生代码执行结束后只能通过回调函数或者发送消息给RN @ReactMethod  public void rnCallNative(String msg) { new TextModule().getTime(mContext);

为了向React Native注册我们刚才创建的原生模块，我们需要实现ReactPackage，ReactPackage主要为注册原生模块所存在，只有已经向React Native注册的模块才能在js模块使用。

(在android/app/src/main/java/com/myNativeModule目录下新建一个MyReactPackage.java。)

package com.myNativeModule;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 com.myNativeModule.MyNativeModule;import java.util.ArrayList;import java.util.Collections;import java.util.List;public class MyReactPackage implements ReactPackage { @Override public List NativeModule createNativeModules(ReactApplicationContext reactContext) { List NativeModule modules = new ArrayList (); // 将我们创建的类添加到原生模块中 modules.add(new MyNativeModule(reactContext)); return modules; public List ViewManager createViewManagers(ReactApplicationContext reactContext) { return Collections.emptyList();

在上述代码中，我们实现一个ReactPackage，接下来呢，我们还需要在android/app/src/main/java/com/nativetest/MainApplication.java中注册我们的MyReactPackage：

@Override protected List ReactPackage getPackages() { return Arrays. ReactPackage asList( new MainReactPackage(), new MyReactPackage() // 在这里将我们刚才创建的MyReactPackage添加进来

原生模块注册完成之后呢，我们接下来就需要为我们的原生模块导出一个js模块，这样做的目的是在实际的项目中，为了更好的可读性和可维护性以及更方便地使用它。

在RN根目录的js/native/下创建一个native.js文件

import { NativeModules } from 'react-native';export { MyNativeModule: NativeModules.MyNativeModule

接下来，我们就可以在其他地方通过下面的方式来使用所导出的这个模块了。

import React, { Component } from 'react';import { StyleSheet, View, Button } from 'react-native';import { MyNativeModule } from './native';type Props = {};export default class App extends Component Props { render() { return ( View "点击调用原生模块方法" /View  call_button() { MyNativeModule.rnCallNative('调用原生模块中的方法成功');const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF',

测试结果如下：

在上边的Demo中，主要是实现原生模块TestModule.java,然后我们在要被RN调用的方法中调用原生类中的方法。对于N多原生类都可以直接粘贴复制过来。这样就可以实现调用复杂方法实现强大功能了。

Demo地址https://github.com/codeprolin/RN_Native_Android