文档章节

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

码农般的学良
 码农般的学良
发布于 2016/11/23 11:06
字数 543
阅读 9
收藏 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
从Android到React Native开发(二、通信与模块实现)

大家吼,(◐‿◑)作为失踪人口回归,这次第二期,就让我们来怼React Native的通信,快速实现单独的React Native模块到APP里,愉悦吧骚年。至于为什么要有这期?当然是为了愉悦的飙车啦ε-...

carguo
08/22
0
0
React Native之Android原生通过DeviceEventEmitter发送消息给js

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u011068702/article/details/82808195 1 问题 Android原生向js发消息,并且可以携带数据 2 实现原理 Android原...

chenyu_insist
前天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

sqlserver 2008 r2 直接下载地址(百度云)

之前下载的sqlserver2008发现不能附加,就卸载了,重新找到了sqlserver2008R2的百度云资源 卸载sqlserver2008还是有点麻烦,不过就是需要删除注册表中的信息 自己来回卸载了3次终于重装sqlse...

dillonxiao
30分钟前
1
0
[Java]JVM调优总结 -Xms -Xmx -Xmn -Xss

JVM调优总结 -Xms -Xmx -Xmn -Xss 博客分类: Java General JVM应用服务器电信CMS算法 堆大小设置 JVM 中最大堆大小有三方面限制:相关操作系统的数据模型(32-bt还是64-bit)限制;系统的可...

morpheusWB
41分钟前
1
0
C++ std::function 和 std::bind

C++11提供了std::function和std::bind两个工具,用于引用可调用对象。这些可调用对象包括 普通函数,Lambda表达式,类的静态成员函数,非静态成员函数以及仿函数等。引用可调用对象,可以用于...

yepanl
今天
2
0
python:可迭代对象的索引

关于 python的range的用法: 注意是[ 开始,结束)的半开区间,不包括结束 http://www.runoob.com/python/python-func-range.html import collectionsfrom collections import Iterable字符串......

Oh_really
今天
3
0
docker-compose ,docker-stack

1.例子 version: "3"services: php: image: registry.cn-hangzhou.aliyuncs.com/lxepoo/apache-php5 ports: - "38080:80" networks: - my_php_mysql volum......

chenbaojun
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部