RN和Android原生端通信

最新推荐文章于 2024-03-16 21:47:17 发布

原创最新推荐文章于 2024-03-16 21:47:17 发布 · 1.3k 阅读

2 ·

CC 4.0 BY-SA版权

react-native 专栏收录该内容

8 篇文章

订阅专栏

本文详细介绍了React Native与原生端的三种通信方式：CallBack、Promise及RCTDeviceEventEmitter，并以Promise为例，展示了如何在自定义模块中实现双向数据传递。通过具体的代码示例，读者可以了解如何在原生端接收JS传来的数据，以及如何从原生层向RN层发送数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

对于原生端自定义模块,注册模块,和RN层调用可以参考上一篇文章React-native调用Android原生模块.

RN层和Native层通信有三种法式(CallBack,Promise,RCTDeviceEventEmitter),前两种是一对一关系由js一次调起native给出结果,RCTDeviceEventEmitter(事件)由native多次发起,会造成js多次接收,不推荐使用事件方式.

这里以Promise为例,完成通信,其它两种demo里由具体实现:

1.在自定义模块里暴露给JS调用的方法中接收JS传递的数据:

//native
@ReactMethod
public void pickImage(String msg, Promise promise) {
    final Activity currentActivity = getCurrentActivity();
    Log.d("from JS",msg);
    this.promise=promise;
    if (currentActivity == null) {
        return;
    }
    if (currentActivity instanceof MainActivity){
        ((MainActivity) currentActivity).setSelect();
    }
}

2.在原生端处理完业务后,向RN传递数据:

//2.在native层使用Promise
public void sendMsgToJS(String msg){
    promise.resolve(msg);
}

3.在JS里调用和接收消息:

<Text style={styles.textInputTitle} onPress={()=>this.promiseNative("向native传递数据")}> </Text>

promiseNative(msg) {
    ImagePickerModule.pickImage(msg).then(
        (result) =>{
            Alert.alert(result)
        }
    ).catch((error) =>{console.log(error)});
}

具体实现可以参考demo:https://github.com/RightOfHand/FirstApp