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

 更新时间:2016年11月22日 14:20:57   作者:bury_pen  
这篇文章主要为大家详细介绍了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');
  }

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

相关文章

  • 浅谈JS的原型和原型链

    浅谈JS的原型和原型链

    在原型链中,Object是顶级公民,function是一级公民,其他的是二级公民,先记住这句话,下面我们来讲解一下为什么这么说。
    2021-06-06
  •  JavaScript+HarmonyOS 实现一个手绘板

     JavaScript+HarmonyOS 实现一个手绘板

    这篇文章主要介绍了 JavaScript+HarmonyOS 实现一个手绘板,利用openHarmony内置的API cnavas组件实现,具体详细内容需要的小伙伴可以参考一下
    2022-07-07
  • 浅谈js构造函数的方法与原型prototype

    浅谈js构造函数的方法与原型prototype

    下面小编就为大家带来一篇浅谈js构造函数的方法与原型prototype。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-07-07
  • js获取腾讯视频ID的方法

    js获取腾讯视频ID的方法

    这篇文章主要介绍了js获取腾讯视频ID的方法,涉及JavaScript针对URL地址规则的分析与字符串的截取操作相关操作技巧,需要的朋友可以参考下
    2016-10-10
  • js生成随机数(指定范围)的实例代码

    js生成随机数(指定范围)的实例代码

    下面小编就为大家带来一篇js生成随机数(指定范围)的实例代码。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-07-07
  • JS数据类型分类及常用判断方法

    JS数据类型分类及常用判断方法

    这篇文章主要介绍了JS数据类型分类及常用判断方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-11-11
  • 微信小程序 高德地图路线规划实现过程详解

    微信小程序 高德地图路线规划实现过程详解

    这篇文章主要介绍了微信小程序 路线规划实现过程详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-08-08
  • uniapp小程序底部tabbar图标大小设置办法

    uniapp小程序底部tabbar图标大小设置办法

    这篇文章主要给大家介绍了关于uniapp小程序底部tabbar图标大小设置办法的相关资料,在使用uniapp进行开发时,tabbar是我们使用的很频繁的一个组件,但是在特定的平台会有一些使用上的限制,需要的朋友可以参考下
    2023-08-08
  • JavaScript中跨域问题的深入理解

    JavaScript中跨域问题的深入理解

    这篇文章主要给大家介绍了关于JavaScript中跨域问题的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-03-03
  • 微信小程序如何实现在线客服功能

    微信小程序如何实现在线客服功能

    这篇文章主要介绍了微信小程序如何实现在线客服功能,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-10-10

最新评论