js实现界面向原生界面发消息并跳转功能


Posted in Javascript onNovember 22, 2016

本文实例为大家分享了js界面向原生界面发消息并跳转的具体代码,供大家参考,具体内容如下

步骤一
在idea中,打开rn项目下的./Android/app,这个过程需要一点儿时间,可能还需要下载gradle的依赖什么的。

步骤二
跟做原生app没差,我们新建一个TestActivity,简单起见,仅实现如下:

public class TestActivity extends AppCompatActivity {

  private Button mBtGoBack;

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_test);
    mBtGoBack = (Button) findViewById(R.id.bt_go_back);
    mBtGoBack.setOnClickListener(new View.OnClickListener() {
      @Override
      public void onClick(View view) {
        finish();
      }
    });

  }
}

步骤三
写一个类ExampleInterface extends ReactContextBaseJavaModule,在该类中接收消息。
具体代码:

public class ExampleInterface extends ReactContextBaseJavaModule {

  private ReactApplicationContext mRApplicationContext;

  public ExampleInterface(ReactApplicationContext reactContext) {
    super(reactContext);
    mRApplicationContext = reactContext;
  }

  //RN使用这个名称来调用原生模块的其他函数
  @Override
  public String getName() {
    return "ExampleInterface";
  }
  //必须写@ReactMethod,将其注册为能够被React调用的函数
  @ReactMethod
  public void HandlerMessage(String aMessage){
    Log.d("lt","====receive message from RN==="+aMessage);
     //这部分实现简单的跳转
    Intent intent = new Intent(mRApplicationContext,TestActivity.class);
    intent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
    mRApplicationContext.startActivity(intent); 
  }

}

步骤四

实现一个包管理器,并将接收消息的类ExampleInterface,注册进去。
代码如下:

public class AnExampleReactPackage implements ReactPackage {

  @Override
  public List<NativeModule> createNativeModules(ReactApplicationContext reactApplicationContext) {
    List<NativeModule> modules = new ArrayList<>();
    modules.add(new ExampleInterface(reactApplicationContext));
    return modules;
  }

  @Override
  public List<Class<? extends JavaScriptModule>> createJSModules() {
    return Collections.emptyList();
  }

  @Override
  public List<ViewManager> createViewManagers(ReactApplicationContext reactApplicationContext) {
    return Collections.emptyList();
  }
}

步骤五
在MainApplication中添加包管理类AnExampleReactPackage;

@Override
  protected List<ReactPackage> getPackages() {
   return Arrays.<ReactPackage>asList(
     new MainReactPackage(),
     new AnExampleReactPackage()
   );
  }

步骤六
在js界面,发送消息;

buttonPress:function(){
  NativeModules.ExampleInterface.HandlerMessage('test');
  }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
通过百度地图获取公交线路的站点坐标的js代码
May 11 Javascript
深入理解Javascript动态方法调用与参数修改的问题
Dec 10 Javascript
node.js中的fs.lchmodSync方法使用说明
Dec 16 Javascript
Javascript中arguments和arguments.callee的区别浅析
Apr 24 Javascript
js+html5实现canvas绘制简单矩形的方法
Jun 05 Javascript
JS实现超简洁网页title标题跑动闪烁提示效果代码
Oct 23 Javascript
详解JavaScript编程中正则表达式的使用
Oct 25 Javascript
javascript性能优化之DOM交互操作实例分析
Dec 12 Javascript
解决bootstrap导航栏navbar在IE8上存在缺陷的方法
Jul 01 Javascript
关于vuex的学习实践笔记
Apr 05 Javascript
js实现动态增加文件域表单功能
Oct 22 Javascript
详解JavaScript 的变量
Mar 08 Javascript
JavaScript面向对象分层思维全面解析
Nov 22 #Javascript
浅析location.href跨窗口调用函数
Nov 22 #Javascript
Angular和Vue双向数据绑定的实现原理(重点是vue的双向绑定)
Nov 22 #Javascript
AngularJS全局scope与Isolate scope通信用法示例
Nov 22 #Javascript
基于js实现checkbox批量选中操作
Nov 22 #Javascript
BootStrap中关于Select下拉框选择触发事件及扩展
Nov 22 #Javascript
基于jquery实现的银行卡号每隔4位自动插入空格的实现代码
Nov 22 #Javascript
You might like
PHP setcookie指定domain参数后,在IE下设置cookie失效的解决方法
2011/09/09 PHP
PHP GD库相关图像生成和处理函数小结
2016/09/30 PHP
IE JS无提示关闭窗口不提示的方法
2010/04/29 Javascript
javascript学习笔记(三)显示当时时间的代码
2011/04/08 Javascript
深入理解JavaScript作用域和作用域链
2011/10/21 Javascript
JS window对象的top、parent、opener含义介绍
2013/12/03 Javascript
javascript实现简单的省市区三级联动
2015/05/14 Javascript
JavaScript原型及原型链终极详解
2016/01/04 Javascript
详解Javascript继承的实现
2016/03/25 Javascript
BootStrap下拉菜单和滚动监听插件实现代码
2016/09/26 Javascript
js正则表达式惰性匹配和贪婪匹配用法分析
2016/12/26 Javascript
nodejs多版本管理总结
2018/04/03 NodeJs
js中innerText/textContent和innerHTML与target和currentTarget的区别
2019/01/21 Javascript
vue写h5页面的方法总结
2019/02/12 Javascript
快速了解Node中的Stream流是什么
2019/02/13 Javascript
Django+Vue实现WebSocket连接的示例代码
2019/05/28 Javascript
[56:00]DOTA2上海特级锦标赛主赛事日 - 4 胜者组决赛Secret VS Liquid第一局
2016/03/05 DOTA
python发腾讯微博代码分享
2014/01/10 Python
centos 下面安装python2.7 +pip +mysqld
2014/11/18 Python
Python中的rjust()方法使用详解
2015/05/19 Python
浅谈Python NLP入门教程
2017/12/25 Python
python topN 取最大的N个数或最小的N个数方法
2018/06/04 Python
修复 Django migration 时遇到的问题解决
2018/06/14 Python
django DRF图片路径问题的解决方法
2018/09/10 Python
浅谈Python的方法解析顺序(MRO)
2020/03/05 Python
Python代码执行时间测量模块timeit用法解析
2020/07/01 Python
Clarks鞋法国官方网站:英国其乐鞋品牌
2018/02/11 全球购物
Electrolux伊莱克斯巴西商店:家用电器、小家电和配件
2018/05/23 全球购物
英语专业应届生求职信范文
2013/11/15 职场文书
生产车间主管岗位职责
2013/12/28 职场文书
安全生产演讲稿
2014/05/09 职场文书
2014年银行个人工作总结
2014/12/05 职场文书
2015年优质护理服务工作总结
2015/04/08 职场文书
结婚典礼致辞
2015/07/28 职场文书
2019交通安全宣传标语集锦!
2019/06/28 职场文书
Python数据分析之绘图和可视化详解
2021/06/02 Python