RN安卓原生模块

https://facebook.github.io/react-native/docs/native-modules-android.html

　　RN实际就是依附在原生平台上，把各种各样的RN组件展示出来。所以RN如果可以访问原生代码的话，可以实现更高的复用性，以及做一些RN做不到的事情，如多线程图片处理、访问数据库等。

代码复用：Toast案例

　　假设公司的安卓通用UI库中已经有一个toast了，我们就不需要再RN中再次实现一次，而是将这个UI库api包装成一个原生模块，给RN调用

　　原生模块就是一个类，通常需要继承ReactContextBaseJavaModule，需要实现一些这个类的方法

public class ToastModule extends ReactContextBaseJavaModule {

  private static final String DURATION_SHORT_KEY = "SHORT";
  private static final String DURATION_LONG_KEY = "LONG";

  public ToastModule(ReactApplicationContext reactContext) {
    super(reactContext);
  }

   // 在JS中通过这个name值来调用当前原生模块（ToastExample.xxx）
  @Override
  public String getName() {
    return "ToastExample";
  }

   // 这个方法不是必须的。用于给JS暴露常量
  @Override
  public Map<String, Object> getConstants() {
    final Map<String, Object> constants = new HashMap<>();
    constants.put(DURATION_SHORT_KEY, Toast.LENGTH_SHORT);
    constants.put(DURATION_LONG_KEY, Toast.LENGTH_LONG);
    return constants;
  }

   // 暴露给JS的方法必须加上ReactMethod注解，被修饰的方法始终是void返回值
  @ReactMethod
  public void show(String message, int duration) {
    Toast.makeText(getReactApplicationContext(), message, duration).show();
  }
}

　　以上的show方法之所以是void，是因为RN与原生代码通信使用的是RN bridge，这个过程是异步的，要想把数据传递给JS，就必须通过回调或者事件，后续会说到。

参数类型

　　被ReactMethod修饰的函数中，类型的对应关系如下：

Boolean -> Bool
Integer -> Number
Double -> Number
Float -> Number
String -> String
Callback -> function
ReadableMap-> Object
ReadableArray-> Array

注册模块

　　原生模块必须注册之后才能被RN调用。下面写好一个package

package com.facebook.react.modules.toast;

import com.facebook.react.ReactPackage;
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 AnExampleReactPackage implements ReactPackage {

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

  @Override
  public List<NativeModule> createNativeModules(
                              ReactApplicationContext reactContext) {
    List<NativeModule> modules = new ArrayList<>();

    modules.add(new ToastModule(reactContext));

    return modules;
  }
}

　　package写好之后，在Application的getPackages函数中返回packager

protected List<ReactPackage> getPackages() {
    return Arrays.<ReactPackage>asList(
            new MainReactPackage(),
            new AnExampleReactPackage()); // <-- Add this line with your package name.
}

　　以上步骤完成之后，就可以通过NativeModules.ToastExample来访问原生模块了，但如果每次都这么直接访问会有性能消耗，所以一般是包装到一个JS模块中：

import {NativeModules} from ‘react-native‘;
module.exports = NativeModules.ToastExample;

// 其他地方调用
import ToastExample from ‘./ToastExample‘;
ToastExample.show(‘Awesome‘, ToastExample.SHORT);

回调

　　原生模块可以是复用已有的android UI（函数调用的声明式UI），也可以复用已有的java逻辑。

　　原生模块支持一个特别的参数，那就是回调，一般用于给JS提供函数返回值。原生模块中的回调函数只能被调用一次，可以存储起来，合适的时候再调用

import com.facebook.react.bridge.Callback;

public class UIManagerModule extends ReactContextBaseJavaModule {

...

  @ReactMethod
  public void measureLayout(
      int tag,
      int ancestorTag,
      Callback errorCallback,
      Callback successCallback) {
    try {
      measureLayout(tag, ancestorTag, mMeasureBuffer);
      float relativeX = PixelUtil.toDIPFromPixel(mMeasureBuffer[0]);
      float relativeY = PixelUtil.toDIPFromPixel(mMeasureBuffer[1]);
      float width = PixelUtil.toDIPFromPixel(mMeasureBuffer[2]);
      float height = PixelUtil.toDIPFromPixel(mMeasureBuffer[3]);
      successCallback.invoke(relativeX, relativeY, width, height);
    } catch (IllegalViewOperationException e) {
      errorCallback.invoke(e.getMessage());
    }
  }

...

　　以上代码在JS中这样来调用

UIManager.measureLayout(
  100,
  100,
  (msg) => {
    console.log(msg);
  },
  (x, y, width, height) => {
    console.log(x + ‘:‘ + y + ‘:‘ + width + ‘:‘ + height);
  }
);

　　因为RN bridge是异步的，所以当原生模块的回调函数执行后，JS中的回调函数不会马上执行，而是放在下一次事件循环

Promise

　　原生模块也支持promise，当配合async/await，可以简化我们的代码。当原生函数的最后一个参数是一个promise，则在JS中调用这个函数时，不需要传递这个promise参数，而且从语法上可以认为调用这个函数会返回一个promise（因为RN bridge是异步的）。把以上的方法改造如下：

import com.facebook.react.bridge.Promise;

public class UIManagerModule extends ReactContextBaseJavaModule {

...
  private static final String E_LAYOUT_ERROR = "E_LAYOUT_ERROR";
  @ReactMethod
  public void measureLayout(
      int tag,
      int ancestorTag,
      Promise promise) {
    try {
      measureLayout(tag, ancestorTag, mMeasureBuffer);

      WritableMap map = Arguments.createMap();

      map.putDouble("relativeX", PixelUtil.toDIPFromPixel(mMeasureBuffer[0]));
      map.putDouble("relativeY", PixelUtil.toDIPFromPixel(mMeasureBuffer[1]));
      map.putDouble("width", PixelUtil.toDIPFromPixel(mMeasureBuffer[2]));
      map.putDouble("height", PixelUtil.toDIPFromPixel(mMeasureBuffer[3]));

      promise.resolve(map);
    } catch (IllegalViewOperationException e) {
      promise.reject(E_LAYOUT_ERROR, e);
    }
  }

...

　　在JS的异步函数中调用以上的原生方法

async function measureLayout() {
  try {
    var {relativeX, relativeY, width, height} = await UIManager.measureLayout(
      100,
      100
    );

    console.log(relativeX + ‘:‘ + relativeY + ‘:‘ + width + ‘:‘ + height);
  } catch (e) {
    console.error(e);
  }
}

measureLayout();

事件

　　原生模块中可以发送事件给JS而不是invoke一个回调方法

...
private void sendEvent(ReactContext reactContext,
                       String eventName,
                       @Nullable WritableMap params) {
  reactContext
      .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
      .emit(eventName, params);
}
...
WritableMap params = Arguments.createMap();
...
sendEvent(reactContext, "keyboardWillShow", params);

　　RN中对这个消息注册监听

...
componentWillMount: function() {
  DeviceEventEmitter.addListener(‘keyboardWillShow‘, function(e: Event) {
    // handle event.
  });
}
...

从activity的startActivityForResult中获取结果

　　因为RN组件最终是显示到activity上的，所以调用的原生模块的最终执行环境也还是activity，可以借助原生模块来监听activity的事件。

　　做到这一点需要在JS中监听activity的onActivityResult（activity必须通过startActivityForResult启动）。方法是让Activity继承BaseActivityEventListener（推荐，对后续API更新更加友好）或者实现ActivityEventListener接口。

　　首先在模块中创建监听器，需要实现监听器的onActivityResult方法，里面获取结果响应到成员变量promise中。

　　接着在原生模块（回顾，就是一个类继承了ReactContextBaseJavaModule）的构造函数中注册刚刚的监听器。

reactContext.addActivityEventListener(mActivityResultListener);

　　以下以获取图片为例子。原生模块给JS暴露一个pickImage方法，这个方法返回图片的路径

public class ImagePickerModule extends ReactContextBaseJavaModule {

  private static final int IMAGE_PICKER_REQUEST = 467081;
  private static final String E_ACTIVITY_DOES_NOT_EXIST = "E_ACTIVITY_DOES_NOT_EXIST";
  private static final String E_PICKER_CANCELLED = "E_PICKER_CANCELLED";
  private static final String E_FAILED_TO_SHOW_PICKER = "E_FAILED_TO_SHOW_PICKER";
  private static final String E_NO_IMAGE_DATA_FOUND = "E_NO_IMAGE_DATA_FOUND";

  private Promise mPickerPromise;

  private final ActivityEventListener mActivityEventListener = new BaseActivityEventListener() {

    @Override
    public void onActivityResult(Activity activity, int requestCode, int resultCode, Intent intent) {
      if (requestCode == IMAGE_PICKER_REQUEST) {
        if (mPickerPromise != null) {
          if (resultCode == Activity.RESULT_CANCELED) {
            mPickerPromise.reject(E_PICKER_CANCELLED, "Image picker was cancelled");
          } else if (resultCode == Activity.RESULT_OK) {
            Uri uri = intent.getData();

            if (uri == null) {
              mPickerPromise.reject(E_NO_IMAGE_DATA_FOUND, "No image data found");
            } else {
              mPickerPromise.resolve(uri.toString());
            }
          }

          mPickerPromise = null;
        }
      }
    }
  };

  public ImagePickerModule(ReactApplicationContext reactContext) {
    super(reactContext);
    // Add the listener for `onActivityResult`
    reactContext.addActivityEventListener(mActivityEventListener);
  }

  @Override
  public String getName() {
    return "ImagePickerModule";
  }

  @ReactMethod
  public void pickImage(final Promise promise) {
    Activity currentActivity = getCurrentActivity();

    if (currentActivity == null) {
      promise.reject(E_ACTIVITY_DOES_NOT_EXIST, "Activity doesn‘t exist");
      return;
    }

    // Store the promise to resolve/reject when picker returns data
    mPickerPromise = promise;

    try {
      final Intent galleryIntent = new Intent(Intent.ACTION_PICK);

      galleryIntent.setType("image/*");

      final Intent chooserIntent = Intent.createChooser(galleryIntent, "Pick an image");

      currentActivity.startActivityForResult(chooserIntent, IMAGE_PICKER_REQUEST);
    } catch (Exception e) {
      mPickerPromise.reject(E_FAILED_TO_SHOW_PICKER, e);
      mPickerPromise = null;
    }
  }
}

　　总结以上流程

  1. 创建监听器，把结果响应到成员变量promise中
  2. 构造函数中注册监听器（这里注册到reactContext的监听器是全局监听的吗？）
  3. 调用模块方法，里面通过startActivityForResult打开相册，把原生方法最后的参数promise传递给成员promise
  4. 相册结束后，以上的监听器会执行，将结果响应给成员promise

RN监听activity生命周期

　　模块实现LifecycleEventListener，在模块的构造器中注册

reactContext.addLifecycleEventListener(this);

　　最后实现以下方法就可以监听activity的生命周期了

@Override
public void onHostResume() {
    // Activity `onResume`
}

@Override
public void onHostPause() {
    // Activity `onPause`
}

@Override
public void onHostDestroy() {
    // Activity `onDestroy`
}

　　因为以上生命周期可能执行多次，所以不要把JS的回调函数放到里面来执行，因为JS传递进来的回调函数只能执行一次，可以在里面往JS传递事件

原文地址：https://www.cnblogs.com/hellohello/p/8320257.html

时间： 2024-08-28 11:21:00

RN安卓原生模块的相关文章

React—Native开发之原生模块向JavaScript发送事件

首先,由RN中文网关于原生模块(Android)的介绍可以看到,RN前端与原生模块之 间通信,主要有三种方法: (1)使用回调函数Callback,它提供了一个函数来把返回值传回给JavaScript. (2)使用Promise来实现. (3)原生模块向JavaScript发送事件. 其中,在我的博客React-Native开发之原生模块封装(Android)升级版 较为详细的阐述了如何使用回调函数Callback 来将数据传向JavaScript 端. 但是有一个比较难以解决的问题是: cal

React-Native开发之原生模块封装（Android)升级版

 本文主题:如何实现原生代码的复用,即如何将原生模块封装. 有时候我们的应用需要进行访问原生平台系统的API接口,但是React Native可能还没有封装相应功能组件.还有可能我们需要 去复用一些原生java代码而不是让JavaScript重新去实现一遍.或者我们可能需要些一些更加高级的功能代码,所线程相关的.例如: 图片处理,数据库以及一些高级功能扩展之类的. React Native平台的开发其实本身也是可以让你写纯原生代码并且还可以让你访问原生平台的功能.这是一个比较高级的功能不 过官方

简单实现RN调用原生方法

在React Native中,一个"原生模块"就是一个实现了"RCTBridgeModule"协议的Objective-C类(个人理解RCTBridgeModule就是react与native之间的桥),下面我们来创建一只猫(cat) 我们现在iOS根目录下创建一个.h头文件(CreatCat.h) 继承桥梁RCTBridgeModule #import <Foundation/Foundation.h> #import "RCTBridgeM

Android React Native使用原生模块

有时候我们的App需要访问平台API,并且React Native可能还没有相应的模块包装:或者你需要复用一些Java代码,而不是用Javascript重新实现一遍:又或者你需要实现某些高性能的.多线程的代码,譬如图片处理.数据库.或者各种高级扩展等等. 而用React Native可以在它的基础上编写真正原生的代码,并且可以访问平台所有的能力.如果React Native还不支持某个你需要的原生特性,你应当可以自己实现该特性的封装. 不过在开始编写代码使用原生模块前,有一个知识点需要掌握,免得

React Native Android原生模块开发实战|教程|心得|如何创建React Native Android原生模块

尊重版权,未经授权不得转载 本文出自:贾鹏辉的技术博客(http://blog.csdn.net/fengyuzhengfan/article/details/54691503) 前言 一直想写一下我在React Native原生模块封装方面的一些经验和心得,来分享给大家,但实在抽不开身,今天看了一下日历发现马上就春节了,所以就赶在春节之前将这篇博文写好并发布(其实是两篇:要看iOS篇的点这里<React Native iOS原生模块开发>). 我平时在用React Native开发App时会

React Native iOS原生模块开发实战|教程|心得|如何创建React Native iOS原生模块

尊重版权,未经授权不得转载 本文出自:贾鹏辉的技术博客(http://blog.csdn.net/fengyuzhengfan/article/details/54691432) 前言 一直想写一下我在React Native原生模块封装方面的一些经验和心得,来分享给大家,但实在抽不开身,今天看了一下日历发现马上就春节了,所以就赶在春节之前将这篇博文写好并发布(其实是两篇:要看Android篇的点这里<React Native Android原生模块开发>). 我平时在用React Nativ

React Native Android原生模块开发实战|教程|心得|怎样创建React Native Android原生模块

尊重版权,未经授权不得转载 本文出自:贾鹏辉的技术博客(http://blog.csdn.net/fengyuzhengfan/article/details/54691503) 告诉大家一个好消息.为大家精心准备的React Native视频教程公布了,大家现能够看视频学React Native了. 前言 一直想写一下我在React Native原生模块封装方面的一些经验和心得.来分享给大家,但实在抽不开身.今天看了一下日历发现立即就春节了.所以就赶在春节之前将这篇博文写好并公布(事实上是两篇

(Unity)Unity实现类似于安卓原生项目的点击安卓返回按钮回到前一页的功能

本章博主和大家一起讨论下Unity怎么实现类似安卓原生项目,点击安卓返回按钮实现返回到前一个页面的功能. 1.定义一个泛型用于响应安卓的返回按钮 public static List<GameObject> list; public GameObject addPanel;                     //添加首页 2.在Start方法中将首页压入栈中 list = new List<GameObject>(5); //将页面压入堆栈中 list.Add(addPane

单步调试理解webpack里通过require加载nodejs原生模块实现原理

在webpack和nodejs里,我们经常使用require函数加载原生模块或者开发人员自定义的模块. 原生模块的加载,比如: const path = require("path"); 这个语句是webpack和nodejs应用里经常使用到的.今天就来谈谈它的实现原理. 还是通过单步调试的方式来学习. 大家首先得通过我前一篇文章webpack打包过程如何调试?学会如何调试webpack打包过程. require函数的实现位于file:///internal/module.js 注意看