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


Posted in Javascript onJanuary 17, 2018

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

React-native桥接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以及文档轻松解决的不值一提了.

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

Javascript 相关文章推荐
接收键盘指令的脚本
Jun 26 Javascript
setInterval 和 setTimeout会产生内存溢出
Feb 15 Javascript
JQuery toggle使用分析
Nov 16 Javascript
js获取TreeView控件选中节点的Text和Value值的方法
Nov 24 Javascript
jQuery平滑旋转幻灯片特效代码分享
Sep 07 Javascript
AngularJs Scope详解及示例代码
Sep 01 Javascript
ES6 迭代器(Iterator)和 for.of循环使用方法学习(总结)
Feb 08 Javascript
vue+iview+less+echarts实战项目总结
Feb 22 Javascript
Vuex的actions属性的具体使用
Apr 14 Javascript
浅探express路由和中间件的实现
Sep 30 Javascript
jQuery实现的图片点击放大缩小功能案例
Jan 02 jQuery
es6数组的flat(),flatMap()函数用法实例分析
Apr 18 Javascript
vue自定义指令directive实例详解
Jan 17 #Javascript
移动web开发之touch事件实例详解
Jan 17 #Javascript
详解layui弹窗父子窗口之间传参数的方法
Jan 16 #Javascript
微信小程序实现image组件图片自适应宽度比例显示的方法
Jan 16 #Javascript
基于VUE移动音乐WEBAPP跨域请求失败的解决方法
Jan 16 #Javascript
AngularJS监听ng-repeat渲染完成的两种方法
Jan 16 #Javascript
微信小程序实现流程进度的图样式功能
Jan 16 #Javascript
You might like
php站内搜索并高亮显示关键字的实现代码
2011/12/29 PHP
php 获取页面中指定内容的实现类
2014/01/23 PHP
Yii框架弹出框功能示例
2017/01/07 PHP
使用PHPWord生成word文档的方法详解
2019/06/06 PHP
Javascript查询DBpedia小应用实例学习
2013/03/07 Javascript
探讨JQUERY JSON的反序列化类 using问题的解决方法
2013/12/19 Javascript
javascript实现json页面分页实例代码
2014/02/20 Javascript
一个JavaScript防止表单重复提交的实例
2014/10/21 Javascript
jQuery EasyUI右键菜单实现关闭标签/选项卡
2016/10/10 Javascript
微信小程序五星评分效果实现代码
2017/04/06 Javascript
细说webpack源码之compile流程-rules参数处理技巧(1)
2017/12/26 Javascript
vue组件表单数据回显验证及提交的实例代码
2018/08/30 Javascript
vue仿element实现分页器效果
2018/09/13 Javascript
Vue.set()动态的新增与修改数据,触发视图更新的方法
2018/09/15 Javascript
微信小程序表单验证WxValidate的使用
2019/11/27 Javascript
Vue.js实现大屏数字滚动翻转效果
2019/11/29 Javascript
python实现批量转换文件编码(批转换编码示例)
2014/01/23 Python
python妹子图简单爬虫实例
2015/07/07 Python
Python利用带权重随机数解决抽奖和游戏爆装备问题
2016/06/16 Python
python2 与 pyhton3的输入语句写法小结
2018/09/10 Python
浅谈python中真正关闭socket的方法
2018/12/18 Python
Python3 tkinter 实现文件读取及保存功能
2019/09/12 Python
详解python如何引用包package
2020/06/07 Python
Sneaker Studio波兰:购买运动鞋
2018/04/28 全球购物
大众服装店创业计划书范文
2014/01/01 职场文书
给民警的表扬信
2014/01/08 职场文书
人事主管岗位职责
2014/01/30 职场文书
难忘的一天教学反思
2014/04/30 职场文书
综治工作心得体会
2014/09/11 职场文书
车贷收入证明范本
2014/09/14 职场文书
党委干部批评与自我批评发言稿
2014/09/28 职场文书
机关班子查摆问题及整改措施
2014/10/28 职场文书
家属答谢词
2015/01/05 职场文书
国庆节慰问信
2015/02/15 职场文书
财务统计员岗位职责
2015/04/14 职场文书
15个值得收藏的JavaScript函数
2021/09/15 Javascript