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

本文实例为大家分享了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');
  }

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

(0)

相关推荐

  • JS 退出系统并跳转到登录界面的实现代码

    Index.aspx页面 Login.aspx 在Index.aspx页面写入JS代码: 复制代码 代码如下: <script language="javascript" type="text/javascript">    function logout(){//        if (confirm("您确定要退出控制面板吗?"))            top.location = "../Login.aspx&quo

  • 如何将JS的变量值传递给ASP变量

    asp作为主页面,外接一个js的,我想知道一下能否在js里面调用asp的变量值,如果能这些值是怎么传递过去的呢? 我是这样做的,不知道是不是正确的?在asp这里:<script type="text/javascript" src="lpindex.js?jsid=trim(request('id'))" ></script> 而在js那边:location.href='lmsg.asp?id=<%=trim(request("

  • 详解js界面跳转与值传递

    本文实例实现的功能如下:注册页(Register.js),点击注册,跳到注册结果页(RegisterResult.js),并将注册的手机号传递过去,显示xx注册成功. index.Android.js 'use strict' import React, { Component } from 'react'; import { AppRegistry,Navigator,BackAndroid} from 'react-native'; var Register = require('./stu

  • JavaScript传递变量: 值传递?引用传递?

    当变量A赋值给变量B时,会将栈中的值复制一份到为新变量分配的空间中. 如何理解? 复制代码 代码如下: var x = y = 1; y = 2; alert(x); x的值为多少? 复制代码 代码如下: var obj = {}; var sub = {}; sub['id'] = 3; obj['sub'] = sub; sub['id'] = 4; alert(obj['sub']['id']); obj['sub']['id']的值又为多少?他们真的符合你的预期吗? 我们分别运行2段代码

  • php+js iframe实现上传头像界面无跳转

    上传头像,界面无跳转的方式很多,我用的是加个iframe那种.下面直接上代码. html: 复制代码 代码如下: //route 为后端接口 //upload/avatar 为上传的头像的保存地址 //imgurl=/upload/avatar/<?=$uid?> 这里最后的<?=$uid?>是为了后面用js实现即时显示最新的更换后的头像用的,参照下面的js部分的代码 //头像保存名称为uid.type,如1.jpg,2.png等 //$user['avatar'] 用户如果上传过

  • IOS程序开发之跳转短信发送界面实现发送短信功能

    项目需求:在程序开发中,我们需要在某个程序里面发送一些短信验证(不是接收短信验证,关于短信验证,传送门:http://www.cnblogs.com/wolfhous/p/5096774.html 项目实现: 新建demo,直接看我源码标志. 源码截图 真机截图 就是如此简单,如您有任何问题/建议或者更好的实现方法,联系本人. 可以看我折叠的源码 /** 点击发送短信按钮*/ - (IBAction)sendMessageBut:(id)sender { /** 如果可以发送文本消息(不在模拟器

  • Android中应用界面主题Theme使用方法和页面定时跳转应用

    主题Theme就是用来设置界面UI风格,可以设置整个应用或者某个活动Activity的界面风格.在Android SDK中内置了下面的Theme,可以按标题栏Title Bar和状态栏Status Bar是否可见来分类:  复制代码 代码如下: android:theme="@android:style/Theme.Dialog" 将一个Activity显示为能话框模式 android:theme="@android:style/Theme.NoTitleBar"

  • JS是按值传递还是按引用传递

    按值传递 VS. 按引用传递 按值传递(call by value)是最常用的求值策略:函数的形参是被调用时所传实参的副本.修改形参的值并不会影响实参.   按引用传递(call by reference)时,函数的形参接收实参的隐式引用,而不再是副本.这意味着函数形参的值如果被修改,实参也会被修改.同时两者指向相同的值.   按引用传递会使函数调用的追踪更加困难,有时也会引起一些微妙的BUG.   按值传递由于每次都需要克隆副本,对一些复杂类型,性能较低.两种传值方式都有各自的问题.   我们

  • Android编程使用Fragment界面向下跳转并一级级返回的实现方法

    本文实例讲述了Android编程使用Fragment界面向下跳转并一级级返回的实现方法.分享给大家供大家参考,具体如下: 1.首先贴上项目结构图: 2.先添加一个接口文件BackHandledInterface.java,定义一个setSelectedFragment方法用于设置当前加载的Fragment在栈顶,主界面MainActivity须实现此接口,代码如下: package com.example.testdemo; public interface BackHandledInterfa

  • JSP与JS交互问题 值传递

    一.在JSP中访问JS返回的值: 问题: 复制代码 代码如下: <script language="javascript"> <!-- var str="123"; <% String aa; %> --> </script> 怎么让这个JSP里的aa获得JAVASCRIPT中str的值???? 详细一点就是: 复制代码 代码如下: <script language="javascript"&

随机推荐