您当前的位置： 首页 >  react native

React native和原生之间的通信

xiangzhihong8 发布时间：2016-11-27 20:23:20 ，浏览量：4

RN中文网关于原生模块（Android）的介绍可以看到，RN前端与原生模块之

间通信，主要有三种方法：

1）使用回调函数Callback，它提供了一个函数来把返回值传回给JavaScript。

2）使用Promise来实现。

3）原生模块向JavaScript发送事件。

关于使用回调，这是最简单的一种通信，这里可以看看官网的实现，今天要讲的是滴三种由原生模块向JavaScript发送事件。

（1）首先，你需要定义一个发送事件的方法。如下所示：

[java] view plain copy
 在CODE上查看代码片派生到我的代码片
  1. /*原生模块可以在没有被调用的情况下往JavaScript发送事件通知。 
  2.     最简单的办法就是通过RCTDeviceEventEmitter， 
  3.     这可以通过ReactContext来获得对应的引用，像这样：*/  
  4.     public static void sendEvent(ReactContext reactContext, String eventName, @Nullable WritableMap paramss)  
  5.     {  
  6.         System.out.println("reactContext="+reactContext);  
  7.   
  8.         reactContext  
  9.                 .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)  
  10.                 .emit(eventName, paramss);  
  11.   
  12.     }  

 

其中方法名可以任意，但是参数不可改变。该方法可以放在你要复用的原生类中（即为原生类1）。

需要注意的是，由于版本问题，该函数中的参数reactContext有可能为null，此时会报NullPointException的错误。所以我们需要手动给reactContext赋值，见步骤2.

（2）我们在原生类1中，定义变量public static ReactContext  MyContext；

然后在我们自定义的继承至ReactContextBaseJavaModule的类中给reactContext赋值。

 

如下所示：

[java] view plain copy
 在CODE上查看代码片派生到我的代码片
  1. public class MyModule extends ReactContextBaseJavaModule {  
  2.   
  3.     private BluetoothAdapter mBluetoothAdapter = null;  
  4.     public MyModule(ReactApplicationContext reactContext) {  
  5.         super(reactContext);  
  6.   
  7.         原生类1.MyContext=reactContext;  
  8.   
  9.           
  10.     }  
  11. .......以下写被@ReactNative所标注的方法  
  12. ............................  
  13. ...................  
  14. }  

 

此时，reactContext将不会是null。也就不会报错。

 

（3）在某个原生函数中向JavaScript发送事件。如下所示：

[java] view plain copy
 在CODE上查看代码片派生到我的代码片
  1. WritableMap event = Arguments.createMap();  
  2. sendEvent(MyContext, "EventName",event);  

（4）在RN前端监听事件。首先导入DeviceEventEmitter，即import{ DeviceEventEmitter } from 'react-native'

然后使用componentWillMount建立监听。

 

代码如下：

[javascript] view plain copy
 在CODE上查看代码片派生到我的代码片
  1. componentWillMount(){    
  2.     
  3.                     DeviceEventEmitter.addListener('EventName', function() {    
  4.                            
  5.                          alert("send success");    
  6.                        });   
  7.   
  8.                                
  9. }  

 

注意：该监听必须放在class里边，和render、const对齐。

 

下边展示一个完整Demo，Demo功能如下：

 

（1）JavaScript端在监听一个事件。

（2）点击前端某行文字，调用原生方法。

（3）在原生方法中，延迟3s后向前端发送对应事件。

（4）前端接收到事件后，给出alert提示。

 

代码如下：

ManiActivity.Java

[java] view plain copy
 在CODE上查看代码片派生到我的代码片
  1. package com.ywq;  
  2.   
  3. import com.facebook.react.ReactActivity;  
  4.   
  5. public class MainActivity extends ReactActivity {  
  6.   
  7.     /** 
  8.      * Returns the name of the main component registered from JavaScript. 
  9.      * This is used to schedule rendering of the component. 
  10.      */  
  11.     @Override  
  12.     protected String getMainComponentName() {  
  13.         return "ywq";  
  14.     }  
  15. }  

ManiApplication.java

[java] view plain copy
 在CODE上查看代码片派生到我的代码片
  1. package com.ywq;  
  2.   
  3. import android.app.Application;  
  4. import android.util.Log;  
  5.   
  6. import com.facebook.react.ReactApplication;  
  7. import com.facebook.react.ReactInstanceManager;  
  8. import com.facebook.react.ReactNativeHost;  
  9. import com.facebook.react.ReactPackage;  
  10. import com.facebook.react.shell.MainReactPackage;  
  11.   
  12. import java.util.Arrays;  
  13. import java.util.List;  
  14.   
  15. public class MainApplication extends Application implements ReactApplication {  
  16.   
  17.   private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {  
  18.     @Override  
  19.     protected boolean getUseDeveloperSupport() {  
  20.       return BuildConfig.DEBUG;  
  21.     }  
  22.   
  23.     @Override  
  24.     protected List getPackages() {  
  25.       return Arrays.asList(  
  26.           new MainReactPackage(),  
  27.               new MyPackage()  
  28.       );  
  29.     }  
  30.   };  
  31.   
  32.   @Override  
  33.   public ReactNativeHost getReactNativeHost() {  
  34.       return mReactNativeHost;  
  35.   }  
  36. }  

MyModule.java

[java] view plain copy
 在CODE上查看代码片派生到我的代码片
  1. package com.ywq;  
  2.   
  3. import com.facebook.react.bridge.ReactApplicationContext;  
  4. import com.facebook.react.bridge.ReactContextBaseJavaModule;  
  5. import com.facebook.react.bridge.ReactMethod;  
  6.   
  7. /** 
  8.  * Created by Administrator on 2016/10/30. 
  9.  */  
  10.   
  11. public class MyModule extends ReactContextBaseJavaModule {  
  12.   
  13.     public MyModule(ReactApplicationContext reactContext) {  
  14.   
  15.         super(reactContext);  
  16.   
  17.         //给上下文对象赋值  
  18.         Test.myContext=reactContext;  
  19.     }  
  20.   
  21.     @Override  
  22.     public String getName() {  
  23.   
  24.         return "MyModule";  
  25.     }  
  26.   
  27.   
  28.     @ReactMethod  
  29.     public void  NativeMethod()  
  30.     {  
  31.         //调用Test类中的原生方法。  
  32.         new Test().fun();  
  33.     }  
  34. }  

MyPackage.java

[java] view plain copy
 在CODE上查看代码片派生到我的代码片
  1. package com.ywq;  
  2.   
  3. import com.facebook.react.ReactPackage;  
  4. import com.facebook.react.bridge.JavaScriptModule;  
  5. import com.facebook.react.bridge.NativeModule;  
  6. import com.facebook.react.bridge.ReactApplicationContext;  
  7. import com.facebook.react.uimanager.ViewManager;  
  8.   
  9. import java.util.ArrayList;  
  10. import java.util.Collections;  
  11. import java.util.List;  
  12.   
  13. /** 
  14.  * Created by Administrator on 2016/10/30. 
  15.  */  
  16.   
  17. public class MyPackage implements ReactPackage {  
  18.     @Override  
  19.     public List createNativeModules(ReactApplicationContext reactContext) {  
  20.   
  21.         List modules=new ArrayList();  
  22.         modules.add(new MyModule(reactContext));  
  23.   
  24.         return modules;  
  25.     }  
  26.   
  27.     @Override  
  28.     public List
关注
打赏
1688896170
查看更多评论

xiangzhihong8

暂无认证

  • 4浏览

    0关注

    1319博文

    0收益

  • 0浏览

    0点赞

    0打赏

    0留言

私信
关注
热门博文

[ 申请 ]友情链接：

快连 快连vpn 搜外友链 笔趣阁 爱思助手 ClashX教程 绘画宝宝 配音宝宝
立即登录/注册

微信扫码登录

0.1388s