文档章节

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/26
0
0
小程序iOS客户端框架——控件事件逻辑框架与控件原生化

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

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

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

halohily
10/29
0
0
移动端SPA开发框架 - Staple

Staple是一个专为移动设备设计的SPA(单页面Web应用)开发框架。Staple解决了SPA应用开发过程中的许多细节问题,以便于让开发者专注与实际业务逻辑的开发。Staple基于Babel和RequireJS构建,...

蔡晓东
2017/02/17
0
0

没有更多内容

加载失败,请刷新页面

加载更多

探索802.11ax

802.11ax承诺在真实条件下改善峰值性能和最差情况。 如何改善今天的Wi-Fi? 在决定如何改进当前版本以外的Wi-Fi时,802.11ac,IEEE和Wi-Fi联盟调查了Wi-Fi部署和行为,以确定更广泛使用的障碍...

linuxprobe16
今天
2
0
使用linux将64G的SDCARD格式化为FAT32

一、命令如下: sudo fdisk -lsudo mkfs.vfat /dev/sda -Isudo fdisk /dev/sda Welcome to fdisk (util-linux 2.29.2). Changes will remain in memory only, until you decide to wri......

mbzhong
今天
4
0
深入理解Plasma(四):Plasma Cash

这一系列文章将围绕以太坊的二层扩容框架,介绍其基本运行原理,具体操作细节,安全性讨论以及未来研究方向等。本篇文章主要介绍在 Plasma 框架下的项目 Plasma Cash。 深入理解Plasma(1):...

HiBlock
昨天
1
0
命令参数的三大风格:Posix、BSD、GNU

今天读到命令行中参数的风格有三大类,即Unix/Posix、BSD、GNU。分别有以下特征: Unix/Posix风格,即命令后的参数,可以分组,便必须以连字符开头,如ps -aux。 BSD风格,即命令后的参数,可...

大别阿郎
昨天
2
0
PHP生成图片验证码

PHP生成图片验证码 /** * PHP生成图片验证码 * Class VerifyImage */class VerifyImage{ // 生成随机字串 private $verifyCode; // 图片对象 private $image; /**...

DrChenXX
昨天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部