[复习] android 原生模块(Promise,事件监听)

2021-03-18  本文已影响0人  吴敬悦

前面两篇:
[复习] android 原生模块(带参数)
[复习] android 原生模块(不带任何参数)

我是接着前两天的。

官网的地址跟前面是相同的:
Promises
Sending Events to JavaScript

首先是 Promise ,我们知道在 js 中,promise 是非常流行的,与 promise 对应的是 async/await ;如果原生模块是 promise ,那么我们就能在 js 中使用 await 的方式来解决异步问题了。

原生中的实现:

    @ReactMethod
    fun testPromise(age: Double, promise: Promise) {
        if (age > 27) {
            promise.resolve("吴敬没钱")
        } else {
            promise.reject("404", "吴敬穷逼")
        }
    }

下面是 js 的实现,跟平时调用函数一样:

NativeModules?.TestModule?.testPromise(27)
    .then(res => {
      console.log(res);
    })
    .catch(err => {
      console.log(err);
    });
// 可以在 async 函数中直接
await NativeModules?.TestModule?.testPromise(27)

下面是事件监听,当我们原生出发什么事件需要告诉 js 端的时候,我们就需要使用事件监听。先看原生端:

    @ReactMethod
    fun sendMessage() {
        val params = Arguments.createMap()
        params.putString("name", "吴敬")
        params.putBoolean("isHaveMoney", false)
        reactApplicationContext.getJSModule(RCTDeviceEventEmitter::class.java).emit("wujing", params)
    }

我这里是使用 js 出发事件,相当于点击了下载按钮,然后原生就会给 js 发送事件,这里我就出发一次。下面看 js 端中的使用:

// 监听事件
const eventEmitter = new NativeEventEmitter(NativeModules?.TestModule);
eventEmitter.addListener('wujing', res => {
    console.log('没装穷', res);
  });

其中 NativeEventEmitterreact-native中的。这里的第一个参数是事件名称,第二个是回调,跟原生是相同的。模拟触发事件:

NativeModules?.TestModule?.sendMessage();
上一篇 下一篇

猜你喜欢

热点阅读