【React Native】之Native Modules

华俊弼
2023-12-01

网上的好多文章关于Native Modules模块的大多数都是使用Toast作为例子,但是这么写有两个问题:

  • Toast的makeText方法为static类型的静态方法,并不需要实例化一个Toast对象就可以使用,那么问题来了,如果调用类的非静态方法,该如何实现Native Modules
  • Toast的show方法,确实给展示了本地方法的封装,但是如果方法有返回值,应该如何将返回值传递给JS

好的,分享这篇文章的目的,就是要解决这两个问题。


封装类的非静态方法

解决这个问题,首先我们需要的就是类的实例化,那么实例化的对象从何而来,两种方式:

第一

public class NativeModule extends ReactContextBaseJavaModule {
    private NativeA nativeA;
    public NativeModule(ReactApplicationContext reactContext) 
    {
        super(reactContext);
        nativeA = new NativeA();
    }
}

ReactContextBaseJavaModule就不用多介绍了,封装本地Module必须要继承的类。这要是在NativeModule的构造函数中实例化一个对象。方便后面对方法的封装时使用。
第二种方式

public class NativeModule extends ReactContextBaseJavaModule {
    private NativeA nativeA;
    public NativeModule(ReactApplicationContext reactContext, NativeAd nativeA) {
        super(reactContext);
        this.nativeA = nativeA;
    }

创建两个参数的NativeA类的构造函数,通常会使用这种方式进行本地类的封装,因为我们会在使用NativeA的方法,将创建好的对象传递过来,这样在JS端就可以实时获取到不同的NativeA的属性值。


有返回值得方法封装

直接上代码,聪明的你一看就明白。

 @ReactMethod
    public void getTitle(Callback successCallBack) {
        String title = nativeA.getTitle();
        successCallBack.invoke(title);
    }

其中getTitle是原生来NativeA的方法,通过Callback类将值传递回JS端,但是记住这个过程是异步的,会有延迟。Callback的路径是com.facebook.react.bridge.Callback

分享完毕,谢谢。

 类似资料: