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 相关文章推荐
javascript中方便增删改cookie的一个类
Oct 11 Javascript
JavaScript类属性的访问方式详解
Feb 11 Javascript
jQuery源码分析之Callbacks详解
Mar 13 Javascript
jquery原理以及学习技巧介绍
Nov 11 Javascript
JS生成某个范围的随机数【四种情况详解】
Apr 20 Javascript
使用JQuery选择HTML遍历函数的方法
Sep 17 Javascript
jQuery操作json常用方法示例
Jan 04 Javascript
Vue全家桶实践项目总结(推荐)
Nov 04 Javascript
vue实现自定义多选与单选的答题功能
Jul 05 Javascript
vue 基于element-ui 分页组件封装的实例代码
Dec 10 Javascript
JS操作Fckeditor的一些常用方法(获取、插入等)
Feb 19 Javascript
vue中重定向redirect:‘/index‘,不显示问题、跳转出错的完美解决
Sep 28 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 daddslashes 使用方法介绍
2012/10/26 PHP
PHP与Java对比学习日期时间函数
2016/07/03 PHP
php使用PDO获取结果集的方法
2017/02/16 PHP
PHP测试框架PHPUnit组织测试操作示例
2018/05/28 PHP
Laravel基础_关于view共享数据的示例讲解
2019/10/14 PHP
php的lavarel框架中join和orWhere的用法
2020/12/28 PHP
使用户点击后退按钮使效三行代码
2007/07/07 Javascript
js获取元素在浏览器中的绝对位置
2010/07/24 Javascript
用javascript为页面添加天气显示实现思路及代码
2013/12/02 Javascript
javascript的事件触发器介绍的实现
2014/06/05 Javascript
浅谈javascript对象模型和function对象
2014/12/26 Javascript
JS组件中bootstrap multiselect两大组件较量
2016/01/26 Javascript
深入浅析JS Function()构造函数
2016/08/22 Javascript
JavaScript中的 attribute 和 jQuery中的 attr 方法浅析
2017/01/04 Javascript
bootstrap组件之导航组件使用方法
2017/01/19 Javascript
jQuery插件zTree实现单独选中根节点中第一个节点示例
2017/03/08 Javascript
vue.js 使用v-if v-else发现没有执行解决办法
2017/05/15 Javascript
使用Node.js实现简易MVC框架的方法
2017/08/07 Javascript
理解nodejs的stream和pipe机制的原理和实现
2017/08/12 NodeJs
Angularjs 1.3 中的$parse实例代码
2017/09/14 Javascript
vue单页面打包文件大?首次加载慢?nginx带你飞,从7.5M到1.3M蜕变过程(推荐)
2018/01/16 Javascript
解决vue-cli单页面手机应用input点击手机端虚拟键盘弹出盖住input问题
2018/08/25 Javascript
JavaScript实现弹出窗口效果
2020/12/09 Javascript
[58:00]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant BO3 第二场 2月7日
2021/03/11 DOTA
Python中顺序表的实现简单代码分享
2018/01/09 Python
Python内置模块hashlib、hmac与uuid用法分析
2018/02/12 Python
python实现简单淘宝秒杀功能
2018/05/03 Python
numpy实现神经网络反向传播算法的步骤
2019/12/24 Python
美国知名的女性服饰品牌:LOFT(洛芙特)
2016/08/05 全球购物
Mansur Gavriel官网:纽约市的一个设计品牌
2019/05/02 全球购物
经销商会议欢迎词
2014/01/11 职场文书
路政管理毕业自荐书范文
2014/02/10 职场文书
法制宣传月活动总结
2014/04/29 职场文书
给上级领导的感谢信
2015/01/22 职场文书
全陪导游词开场白
2015/05/29 职场文书
忠犬八公的故事观后感
2015/06/05 职场文书