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 相关文章推荐
arguments对象
Nov 20 Javascript
javascript实现将文件保存到本地方法汇总
Jul 26 Javascript
Jquery代码实现图片轮播效果(一)
Aug 12 Javascript
jquery实现页面常用的返回顶部效果
Mar 04 Javascript
js 能实现监听F5页面刷新子iframe 而父页面不刷新的方法
Nov 09 Javascript
[原创]SyntaxHighlighter自动识别并加载脚本语言
Feb 07 Javascript
js限制input只能输入有效的数字(第一个不能是小数点)
Sep 28 Javascript
浅谈JavaScript面向对象--继承
Mar 20 Javascript
vue 使用外部JS与调用原生API操作示例
Dec 02 Javascript
JS实现秒杀倒计时特效
Jan 02 Javascript
Angular利用HTTP POST下载流文件的步骤记录
Jul 26 Javascript
vant-ui AddressEdit地址编辑和van-area的用法说明
Nov 03 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执行批量mysql语句的解决方法
2013/05/02 PHP
如何使用PHP Embed SAPI实现Opcodes查看器
2015/11/10 PHP
jQuery.event兼容各浏览器的event详细解析
2013/12/18 Javascript
JS OffsetParent属性深入解析
2014/01/13 Javascript
js获取某元素的class里面的css属性值代码
2014/01/16 Javascript
jQuery调用RESTful WCF示例代码(GET方法/POST方法)
2014/01/26 Javascript
js网页实时倒计时精确到秒级
2014/02/10 Javascript
选择复选框按钮置灰否则按钮可用
2014/05/22 Javascript
node.js中的fs.realpath方法使用说明
2014/12/16 Javascript
JS验证邮件地址格式方法小结
2015/12/01 Javascript
jQuery生成假加载动画效果
2016/12/01 Javascript
使用JavaScript为一张图片设置备选路径的方法
2017/01/04 Javascript
JavaScript制作简单的框选图表
2017/05/15 Javascript
JS实现unicode和UTF-8之间的互相转换互转
2017/07/05 Javascript
vue3.0 搭建项目总结(详细步骤)
2019/05/20 Javascript
详解vue-property-decorator使用手册
2019/07/29 Javascript
jquery实现两个div中的元素相互拖动的方法分析
2020/04/05 jQuery
python中利用Future对象回调别的函数示例代码
2017/09/07 Python
对python中的xlsxwriter库简单分析
2018/05/04 Python
Python实现随机漫步功能
2018/07/09 Python
Python3实现统计单词表中每个字母出现频率的方法示例
2019/01/28 Python
Python2和Python3的共存和切换使用
2019/04/12 Python
tensorflow 利用expand_dims和squeeze扩展和压缩tensor维度方式
2020/02/07 Python
Python中zip函数如何使用
2020/06/04 Python
浅谈pytorch中torch.max和F.softmax函数的维度解释
2020/06/28 Python
HTML5去掉输入框type为number时的上下箭头的实现方法
2020/01/03 HTML / CSS
COS美国官网:知名服装品牌
2019/04/08 全球购物
给学校的建议书
2014/03/12 职场文书
领导班子党的群众路线教育实践活动对照检查材料
2014/09/25 职场文书
实名检举信范文
2015/03/02 职场文书
教师岗位职责范本
2015/04/02 职场文书
2015暑假社会调查报告
2015/07/13 职场文书
公司车队管理制度
2015/08/04 职场文书
Matplotlib绘制混淆矩阵的实现
2021/05/27 Python
启动Tomcat时出现大量乱码的解决方法
2021/06/21 Java/Android
Windows10安装Apache2.4的方法步骤
2022/06/25 Servers