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 相关文章推荐
Dom 是什么的详细说明
Oct 25 Javascript
不使用中间变量,交换int型的 a, b两个变量的值。
Oct 29 Javascript
javascript异步编程的4种方法
Feb 19 Javascript
使用typeof判断function是否存在于上下文
Aug 14 Javascript
jquery实现点击展开列表同时隐藏其他列表
Aug 10 Javascript
Bootstrap图片轮播组件使用实例解析
Jun 30 Javascript
javascript中sort排序实例详解
Jul 24 Javascript
详解ECharts使用心得总结
Dec 06 Javascript
微信小程序之获取当前位置经纬度以及地图显示详解
May 09 Javascript
详解vue中computed 和 watch的异同
Jun 30 Javascript
layui的select联动实现代码
Sep 28 Javascript
在react-antd中弹出层form内容传递给父组件的操作
Oct 24 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 获取客户端真实IP地址多种方法小结
2010/05/15 PHP
php下正则来匹配dede模板标签的代码
2010/08/21 PHP
解析php中const与define的应用区别
2013/06/18 PHP
PHP数据库操作二:memcache用法分析
2017/08/16 PHP
有关js的变量作用域和this指针的讨论
2010/12/16 Javascript
JQuery实现简单时尚快捷的气泡提示插件
2012/12/20 Javascript
javascript实现瀑布流自适应遇到的问题及解决方案
2015/01/28 Javascript
JavaScript使用ActiveXObject访问Access和SQL Server数据库
2015/04/02 Javascript
jQuery复制表单元素附源码分享效果演示
2015/09/30 Javascript
日常收藏的jquery技巧
2015/12/02 Javascript
JavaScript的Backbone.js框架入门学习指引
2016/05/07 Javascript
ES6知识点整理之模块化的应用详解
2019/04/15 Javascript
微信小程序云开发之模拟后台增删改查
2019/05/16 Javascript
微信小程序使用字体图标的方法
2019/05/23 Javascript
jQuery实现判断滚动条滚动到document底部的方法分析
2019/08/27 jQuery
[01:05:32]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#1COL VS Alliance第一局
2016/03/04 DOTA
[33:19]完美世界DOTA2联赛PWL S2 PXG vs InkIce 第一场 11.26
2020/11/30 DOTA
Python实现对PPT文件进行截图操作的方法
2015/04/28 Python
pandas中的DataFrame按指定顺序输出所有列的方法
2018/04/10 Python
在Django中输出matplotlib生成的图片方法
2018/05/24 Python
python3的输入方式及多组输入方法
2018/10/17 Python
利用python将图片版PDF转文字版PDF
2019/05/03 Python
ubuntu 18.04 安装opencv3.4.5的教程(图解)
2019/11/04 Python
CSS3 transforms应用于背景图像的解决方法
2019/04/16 HTML / CSS
The North Face北面英国官网:美国著名户外品牌
2017/12/13 全球购物
周仰杰(JIMMY CHOO)法国官方网站:闻名世界的鞋子品牌
2019/09/27 全球购物
劳资人员岗位职责
2013/12/19 职场文书
合同协议书格式
2014/04/18 职场文书
小学学雷锋活动总结
2014/04/25 职场文书
学校学雷锋活动总结
2014/06/26 职场文书
宣传普通话标语
2014/06/27 职场文书
镇创先争优活动总结
2014/08/28 职场文书
2014年银行信贷员工作总结
2014/12/08 职场文书
介绍信格式样本
2015/05/05 职场文书
导游词之扬州大明寺
2019/10/09 职场文书
《艾尔登法环》1.03.3补丁上线 碎星伤害调整
2022/04/07 其他游戏