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 相关文章推荐
slice函数的用法 之不错的应用
Dec 29 Javascript
一个js实现的所谓的滑动门
May 23 Javascript
Convert Seconds To Hours
Jun 16 Javascript
js实现(全选)多选按钮的方法【附实例】
Mar 30 Javascript
angular ngClick阻止冒泡使用默认行为的方法
Nov 03 Javascript
BootStrap模态框和select2合用时input无法获取焦点的解决方法
Sep 01 Javascript
详解如何使用webpack打包JS
Jun 21 Javascript
jQuery 点击获取验证码按钮及倒计时功能
Sep 20 jQuery
JS实现数组深拷贝的方法分析
Mar 06 Javascript
Vue.js@2.6.10更新内置错误处机制Fundebug同步支持相应错误监控
May 13 Javascript
javascript 模块依赖管理的本质深入详解
Apr 30 Javascript
微信小程序地图实现展示线路
Jul 29 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
特详细的PHPMYADMIN简明安装教程
2008/08/01 PHP
php中current、next与reset函数用法实例
2014/11/17 PHP
Extjs Ajax 乱码问题解决方案
2009/04/15 Javascript
Firefox+FireBug使JQuery的学习更加轻松愉快
2010/01/01 Javascript
jQuery UI Dialog 创建友好的弹出对话框实现代码
2012/04/12 Javascript
JavaScript加强之自定义callback示例
2013/09/21 Javascript
ie下$.getJSON出现问题的解决方法
2014/02/12 Javascript
JavaScript继承基础讲解(原型链、借用构造函数、混合模式、原型式继承、寄生式继承、寄生组合式继承)
2014/08/16 Javascript
jquery实现将获取的颜色值转换为十六进制形式的方法
2014/12/20 Javascript
使用jquery操作session方法分享
2015/01/22 Javascript
基于jQuery实现自动轮播旋转木马特效
2015/11/02 Javascript
jQuery基于$.ajax设置移动端click超时处理方法
2016/05/14 Javascript
jQuery内容过滤选择器用法示例
2016/09/09 Javascript
javaScript之split与join的区别(详解)
2017/11/08 Javascript
深入Node TCP模块的理解
2019/03/13 Javascript
微信小程序 行的删除和增加操作实现详解
2019/09/29 Javascript
python使用nntp读取新闻组内容的方法
2015/05/08 Python
Python Grid使用和布局详解
2018/06/30 Python
pygame实现雷电游戏雏形开发
2018/11/20 Python
Python3 mmap内存映射文件示例解析
2020/03/23 Python
通过实例解析python subprocess模块原理及用法
2020/10/10 Python
简单介绍CSS3中Media Query的使用
2015/07/07 HTML / CSS
可自定义箭头样式的CSS3气泡提示框
2016/03/16 HTML / CSS
美国女鞋品牌:naturalizer(娜然)
2016/08/01 全球购物
全球酒店比价网:HotelsCombined
2017/06/20 全球购物
BAILEY 44官网:美国制造的女性服装
2019/07/01 全球购物
Vilebrequin美国官方网上商店:法国豪华泳装品牌
2020/02/22 全球购物
恶意软件的定义
2014/11/12 面试题
培训班开班仪式主持词
2014/03/28 职场文书
出纳试用期自我鉴定
2014/04/07 职场文书
住房抵押登记委托书
2014/09/27 职场文书
2015年团队工作总结范文
2015/05/04 职场文书
CSS完成视差滚动效果
2021/04/27 HTML / CSS
python面向对象版学生信息管理系统
2021/06/24 Python
Python实现滑雪小游戏
2021/09/25 Python
Redis实现短信验证码登录的示例代码
2022/06/14 Redis