文档章节

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

码农般的学良
 码农般的学良
发布于 2016/11/23 11:06
字数 543
阅读 10
收藏 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与原生端就不可避免的需要进行交互,比如页面跳转和数据传递。本篇文章主要以...

不變旋律
2018/06/13
0
0
Native 与 H5 交互的那些事

Hybrid开发模式目前几乎每家公司都有涉及和使用,这种开发模式兼具良好的Native用户交互体验的优势与WebApp跨平台的优势,而这种 模式,在Android中必然需要WebView作为载体来展示H5内容和进...

oschina
2016/05/03
11.2K
10
小程序iOS客户端框架——控件事件逻辑框架与控件原生化

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

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

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

codeGoogle
2018/04/26
0
0
从简书iOS客户端,来谈谈Hybrid方案细节设计

作为一位 iOS 开发人员,你应该已经敏感地发现,自己的工作涉及内容已经不止于 Native 的部分,因为 Hybrid App 和 ReactNative 等技术方案已经不仅仅是概念,越来越多的公司开始着手自己的 ...

halohily
2018/10/29
0
0

没有更多内容

加载失败,请刷新页面

加载更多

深度学习为图片人物换装【python代码教程】

在观看本文之前,请答应我要善良。昨天预告了下,发现很多同学对这个模型都表示出兴趣,甚至有好多同学后台发来照片让我帮他们脱裤子。授人以鱼不如授人以渔,请这些同学好自为之~ 01效果演示...

阿里云官方博客
22分钟前
1
0
centos7安装RabbitMQ详细过程

由于RabbitMQ是基于Erlang语言开发,所以在安装RabbitMQ之前,需要先安装Erlang 1、环境: centos 7.1 内核版本3.10.0-229.el7.x86_64 Erlang 19.0.4版本 RabbitMQ 3.6.14版本 2、在线安装E...

秋至丶枫以落
53分钟前
1
0
6个使用KeePassX保护密码的技巧

虽然安全是个深奥的主题,但是你可以遵循几个简单的日常习惯来减小攻击面。本文将解释确保密码信息安全的重要性,并给出如何充分利用KeePassX的建议。 日益互联的数字世界使安全成为一个重要...

Linux就该这么学
55分钟前
1
0
UnsatisfiedLinkError sawindbg.dll

方法:搜索sawindbg.dll,然后将文件报错的目录下

洛水
今天
5
0
说说不知道的Golang中参数传递

本文由云+社区发表 导言 几乎每一个C++开发人员,都被面试过有关于函数参数是值传递还是引用传递的问题,其实不止于C++,任何一个语言中,我们都需要关心函数在参数传递时的行为。在golang中...

腾讯云加社区
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部