React Native之Native Modules

Posted 2022-11-25 YongHui_Luo

网上的好多文章关于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。

分享完毕，谢谢。