React Native之Android原生模块反向通知JS

前边介绍了从JS调用Android原生模块的方法,现在再介绍一下,如何从Native反向通知JS。

一、目录结构

1
2
3
4
reactevent
├── ReactEvent.kt
├── ReactEventPkg.kt // ← here
└── ReactEventR.kt // ← here

PS: ReactEventR中的R表示是反向的意思。

二、ReactEventR.kt

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
package com.xxx.mobile.reactevent

import com.facebook.react.bridge.ReactApplicationContext
import com.facebook.react.bridge.ReactContextBaseJavaModule
import com.facebook.react.modules.core.DeviceEventManagerModule
import java.util.concurrent.CountDownLatch

class ReactEventR(reactContext: ReactApplicationContext) : ReactContextBaseJavaModule(reactContext) {

companion object {
var instance: ReactEventR? = null
private var mLatch = CountDownLatch(1)

fun init(reactContext: ReactApplicationContext): ReactEventR {
instance = ReactEventR(reactContext)
return instance as ReactEventR
}
}

/**
* Fix bug:
* Tried to access a JS module
* before the React instance was fully set up.
*/
override fun initialize() {
super.initialize()
mLatch.countDown()
}

fun emit(data: String) {
try {
mLatch.await()
reactApplicationContext
.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter::class.java)
.emit("ReactEventR", data)
} catch (e: InterruptedException) {
e.printStackTrace()
}
}

override fun getName(): String {
return "ReactEventR"
}
}

三、ReactEventPkg.kt

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
package com.xxx.mobile
import android.view.View
import com.facebook.react.bridge.NativeModule
import com.facebook.react.bridge.ReactApplicationContext
import java.util.Collections.emptyList
import com.facebook.react.ReactPackage
import com.facebook.react.uimanager.ReactShadowNode
import com.facebook.react.uimanager.ViewManager
class ReactEventPkg : ReactPackage {
/**
* @param context 上下文
* @return 需要调用的原生控件
*/
override fun createViewManagers(context: ReactApplicationContext?):
MutableList<ViewManager<View, ReactShadowNode<*>>> {
return emptyList()
}
/**
* @param context 上下文
* @return 需要调用的原生模块
*/
override fun createNativeModules(context: ReactApplicationContext): List<NativeModule> {
return listOf<NativeModule>(
ReactEvent(context),
ReactEventR.init(context)) // ← here
}
}

四、App.kt

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
class App : Application(), ReactApplication {

private val mReactNativeHost = object : ReactNativeHost(this) {
override fun getUseDeveloperSupport(): Boolean {
return BuildConfig.DEBUG
}
override fun getPackages(): List<ReactPackage> {
return Arrays.asList<ReactPackage>(
MainReactPackage(),
// ...
ReactEventPkg() // ← here
)
}
override fun getJSMainModuleName(): String {
return "index"
}
}
// ...
}

PS: 此App.kt实际是由MainApplication.java转为Kotlin语言的文件

五、Kotlin发送示例

1
2
val emitter: ReactEventR? = ReactEventR.getInstance()
emitter?.emit("SOMETHING")

六、JS接收使用示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import {NativeModules,NativeEventEmitter} from 'react-native';
const { ReactEventR } = NativeModules; // ← here
class Home extends React.Component {
componentDidMount() {
const ReactEventREmitter = new NativeEventEmitter(ReactEventR); // ← here
this.rer_subscription = ReactEventREmitter.addListener( // ← here
'ReactEventR',
value => {
// TODO 更新状态
console.warn("ReactEventR: come value:", value)
}
)
// ...
}
componentWillUnmount(){
// ...
this.rer_subscription && this.rer_subscription.remove(); // ← here
}
// ...
}

参考链接

  1. iOS开发-与ReactNative交互时bridge is not set
  2. kevinejohn/react-native-keyevent#KeyEventModule.java
  3. Sending Events to JavaScript#坑
  4. Sending events to JavaScript from your native module in React Native