React-native桥接Android原生开发详解

 更新时间:2018年01月17日 09:00:49   作者:一天清晨  
本篇文章主要介绍了React-native桥接Android原生开发详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

在开发RN的漫漫长河中,早晚有那么一天要接触到安卓的原生开发,笔者来介绍一下其中的酸甜苦辣.对于一个不懂android的小白来说,刚开始有点难,不过都是万事开头难.语言是想通的,原理也是大径若一.

开发过程中是要集成高德的导航功能,没有找到好的轮子的,只要写原生代码,然后在用JS去调用原生的导航模块.

首先注册模块

其意义在与将类注册到RN中,才能用JS去调用

public class AnExampleReactPackage implements ReactPackage {
  @Override
  public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
    return Collections.emptyList();
  }
  @Override
  public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
    List<NativeModule> modules = new ArrayList<>();

    modules.add(new NaviActivity(reactContext));
    return modules;
  }
}

其中modules.add(new NaviActivity(reactContext));意义就是添加一个安卓原生的activity模块

这个模块可以定义方案,RN可以直接调用(方法上必须声明了@ReactMethod才可以)

@ReactMethod
  public void showFengMap(String mapID){
    Activity currentActivity = getCurrentActivity();
    Intent intent = new Intent(currentActivity, 页面名.class);
    currentActivity.startActivity(intent);
  }

笔者其中的到吗是跳转到其他页面,这里也可以做一些其他的操作.例如直接去分享

声明

在安卓程序的app内的MainApplication内,

@Override
  protected List<ReactPackage> getPackages() {
   return Arrays.<ReactPackage>asList(
     new MainReactPackage(),
      new AnExampleReactPackage()
   );
  }

加入刚刚注册过的包名

JS调用原生代码

import { NativeModules } from 'react-native';

export default NativeModules.NaviActivity;

笔者这里写了一个untils/CommonAndroidUntils.js,在需要用的页面直接引入这个js文件

CommonAndroidUntils.show();

实现跳转.

集成高德导航

对于一个小白直接去在android studio内集成高德地图刚开始还是有点难度的.不过理解之后感觉还好.简单些一下遇到的问题,提醒自己,帮助他人

直接拖入的.jar语音包不能引入

解决办法是右键.jar包,有将.jar引入的选项点击,等待同步即可.

其余的都是些小问题,根据demo以及文档轻松解决的不值一提了.

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

相关文章

  • 浅谈React原生APP更新

    浅谈React原生APP更新

    当一个APP在运行的时候, 开发者想要将自己的代码更新到用户的手机上时, 一般都有两种方案, 一是热更新, 二就是APP更新.热更新暂且不说,这篇文章就讲讲 APP 如何更新。
    2021-06-06
  • React中的Context应用场景分析

    React中的Context应用场景分析

    这篇文章主要介绍了React中的Context应用场景分析,Context 提供了一种在组件之间共享数据的方式,而不必显式地通过组件树的逐层传递 props,通过实例代码给大家介绍使用步骤,感兴趣的朋友跟随小编一起看看吧
    2021-06-06
  • React事件节流效果失效的原因及解决

    React事件节流效果失效的原因及解决

    这篇文章主要介绍了React事件节流效果失效的原因及解决,帮助大家更好的理解和学习使用React框架,感兴趣的朋友可以了解下
    2021-04-04
  • 浅谈React 服务器端渲染的使用

    浅谈React 服务器端渲染的使用

    本篇文章主要介绍了浅谈React 服务器端渲染的使用,React是最受欢迎的客户端 JavaScript 框架,在本教程中,我们将逐步向您介绍服务器端的渲染示例
    2018-05-05
  • 基于React.js实现原生js拖拽效果引发的思考

    基于React.js实现原生js拖拽效果引发的思考

    这篇文章主要介绍了基于React.js实现原生js拖拽效果,继而引发的一系列思考,感兴趣的小伙伴们可以参考一下
    2016-03-03
  • react实现点击选中的li高亮的示例代码

    react实现点击选中的li高亮的示例代码

    本篇文章主要介绍了react实现选中的li高亮的示例代码,页面上有很多个li,要实现点击到哪个就哪个高亮。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-05-05
  • React-Native之定时器Timer的实现代码

    React-Native之定时器Timer的实现代码

    本篇文章主要介绍了React-Native之定时器Timer的实现代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10
  • react-native android状态栏的实现

    react-native android状态栏的实现

    这篇文章主要介绍了react-native android状态栏的实现,使状态栏颜色与App颜色一致,使用户界面更加整体。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-06-06
  • react获取input输入框的值的方法示例

    react获取input输入框的值的方法示例

    这篇文章主要介绍了react获取input输入框的值的方法示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-04-04
  • 深入掌握 react的 setState的工作机制

    深入掌握 react的 setState的工作机制

    本篇文章主要介绍了深入掌握 react的 setState的工作机制,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09

最新评论