文档章节

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

码农般的学良
 码农般的学良
发布于 2016/11/23 11:06
字数 543
阅读 9
收藏 0
点赞 0
评论 0

这篇文章主要为大家详细介绍了js实现界面向原生界面发消息并跳转功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

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

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

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

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,在该类中接收消息。 
具体代码:

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

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,注册进去。 
代码如下:

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

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;

?

1

2

3

4

5

6

7

@Override

 protected List<ReactPackage> getPackages() {

  return Arrays.<ReactPackage>asList(

    new MainReactPackage(),

    new AnExampleReactPackage()

  );

 }

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

?

1

2

3

buttonPress:function(){

  NativeModules.ExampleInterface.HandlerMessage('test');

  }

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

© 著作权归作者所有

共有 人打赏支持
码农般的学良
粉丝 1
博文 20
码字总数 23265
作品 0
通州
RN与原生交互(一)——基本页面跳转

React Native(以下简称RN)开发app过程中大部分都可以在JS端完成,但是也有一些功能是需要原生端来完成的。这时RN与原生端就不可避免的需要进行交互,比如页面跳转和数据传递。本篇文章主要以...

不變旋律
06/13
0
0
小程序iOS客户端框架——控件事件逻辑框架与控件原生化

小程序自发布以来,为开发者和用户提供了一种轻量级的App。作为一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或者搜一下即可打开应用。小程序也体现了“用...

codeGoogle
04/24
0
0
小程序iOS客户端框架—控件事件逻辑框架与控件原生化

小程序自发布以来,为开发者和用户提供了一种轻量级的App。作为一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或者搜一下即可打开应用。小程序也体现了“用...

codeGoogle
04/26
0
0
iOS WKWebView和JS交互的两种方式

本文介绍两种方式实现iOS WKWebView和JS交互 WKWebViewConfiguration注入WKScriptMessageHandler UIWebViewDelegate回调方法中处理 WKWebViewConfiguration注入WKScriptMessageHandler 网页很......

aron1992
2017/02/18
0
0
模拟ajax实现网络爬虫——HtmlUnit

最近在用Jsoup抓取某网站数据,可有些页面是ajax请求动态生成的,去群里问了一下,大神说模拟ajax请求即可。去网上搜索了一下,发现了这篇文章,拿过来先用着试试。转帖如下: 网上关于网络爬...

MiniBu
2013/06/26
0
4
微信开放JS-SDK,助力网页开发[转自微信官方]

微信公众平台今日面向开发者开放微信内网页开发工具包(微信JS-SDK)。 通过微信JS-SDK提供的11类接口集,开发者不仅能够在网页上使用微信本身的拍照、选图、语音、位置等基本能力,还可以直...

明非_
2014/07/26
0
14
深度支持Android平台,基于Rexsee的移动Web应用实现

2008年11月,《连线》杂志主编Chris Anderson一文“Web已死,Internet永生”在移动互联网大幕拉开之际引起轩然大波。应用交付的转变注定了传统Web模式已不再满足用户的需求与体验,Web应用向...

yejiang
2012/03/15
0
0
「大前端」Weex在达人店的一年实践

Weex在达人店的一年实践 本文来自尚妆移动端团队路飞 发表于尚妆github博客,欢迎订阅! 尚妆达人店接入weex也一年的时间了,在此期间,也陆陆续续出了一些文章: 「Android」 详细全面的基于...

尚妆产品技术刊读
2017/12/08
0
0
DWZ实践——Dialog到NavTab的跳转

1.场景 在左侧菜单栏中点击某一链接,弹出对话框,对话框中需要用户选择某一信息(select),点击下一步,关闭对话框,然后跳转到一个navtab。 2.版本 1.4.3 3.解决方案 1)对话框如何跳转到nav...

夕水溪下
2013/03/27
0
0
Android WebView自定义处理错误页面显示(404等)

关键代码以下: [java] view plaincopyprint? @Override public void onReceivedError(WebView view, int errorCode, String description, String failingUrl) { //用javascript隐藏系统定义的......

simpower
2014/08/30
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Confluence 6 配置 HTTP 超时设置

当宏,例如 RSS Macro 进行 HTTP 请求的时候,有可能因为请求的时间比较长,而导致超时。你可以通过设置系统参数来避免这个问题。 配置 HTTP 超时设置: 在屏幕的右上角单击 控制台按钮 ,然...

honeymose
12分钟前
0
0
我的第一篇博文

网络界的前辈们好。本人从接触网络到你现在也有4、5年的时间了,期间不断的通过网络学习,当然也没少看大牛们给的建议。 2011年的9月份,如愿以偿的上了“大学”,刚上大学就接触到了一门叫做...

yeahlife
26分钟前
0
0
第十四章NFS服务搭建与配置

14.1 NFS介绍 NFS介绍 NFS是Network File System的缩写;这个文件系统是基于网路层面,通过网络层面实现数据同步 NFS最早由Sun公司开发,分2,3,4三个版本,2和3由Sun起草开发,4.0开始Netap...

Linux学习笔记
32分钟前
0
0
双向认证-nginx

1、设置容器 docker run -it --name nginx-test2 -v /home/nginx:/apps -v /home/nginx/conf/nginx.conf:/etc/nginx/nginx.conf:ro -p 8183:80 -p 7443:443 -d nginx:stable 2、修改nginx配......

hotsmile
32分钟前
0
0
深入了解 Java 自动内存管理机制及性能优化

一图带你看完本文 一、运行时数据区域 首先来看看Java虚拟机所管理的内存包括哪些区域,就像我们要了解一个房子,我们得先知道这个房子大体构造。根据《Java虚拟机规范(Java SE 7 版)》的规...

Java大蜗牛
34分钟前
4
0
SpringBoot | 第六章:常用注解介绍及简单使用

前言 之前几个章节,大部分都是算介绍springboot的一些外围配置,比如日志 配置等。这章节开始,开始总结一些关于springboot的综合开发的知识点。由于SpringBoot本身是基于Spring和SpringMvc...

oKong
35分钟前
7
0
云数据库架构演进与实践

如今,大型企业如金融企业和银行等,在下一代的微服务架构转型要求下,需要基础软件和数据平台能够实现原生的云化,以满足微服务架构的需求。 微服务,也就是一种面向服务的,有特定边界的松...

巨杉数据库
36分钟前
0
0
Linux系统梳理---系统搭建(一):jdk卸载与安装

1.去官网下载符合Linux版本的jdk,暂用jdk-8u171-linux-x64.rpm 2.登陆Linux,进入usr目录,创建java目录(方便管理,可以其他位置):mkdir java 3.上传下载的jdk包至Linux服务器,使用rz指令(sz f...

勤奋的蚂蚁
47分钟前
0
0
Linux Kernel 4.16 系列停止维护,用户应升级至 4.17

知名 Linux 内核维护人员兼开发人员 Greg Kroah-Hartman 近日在发布 4.16.18 版本的同时,宣布这是 4.16 系列的最后一个维护版本,强烈建议用户立即升级至 4.17 系列。 Linux 4.16 于 2018 年...

六库科技
49分钟前
0
0
JVM 堆内存设置 -Xmx -Xms

在Tomcat的启动参数里可以设置,如下 参数说明: -Xmx Java Heap最大值,默认值为物理内存的1/4,最佳设值应该视物理内存大小及计算机内其他内存开销而定; -Xmx 此设置控制 Java 堆的最大大...

不开心的时候不要学习
51分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部