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 相关文章推荐
JavaScript 调试器简介
Feb 21 Javascript
window.location.hash 属性使用说明
Mar 20 Javascript
js 绑定带参数的事件以及手动触发事件
Apr 27 Javascript
全系IE支持Bootstrap的解决方法
Oct 19 Javascript
jQuery简单实现iframe的高度根据页面内容自适应的方法
Aug 01 Javascript
JavaScript三种绑定事件方式及相互之间的区别分析
Jan 10 Javascript
收集前端面试题之url、href、src
Mar 22 Javascript
使用react实现手机号的数据同步显示功能的示例代码
Apr 03 Javascript
Javascript实现动态时钟效果
Nov 17 Javascript
微信小程序模板消息推送的两种实现方式
Aug 27 Javascript
React实现轮播效果
Aug 25 Javascript
DWR内存兼容及无法调用问题解决方案
Oct 16 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
实时抓取YAHOO股票报价的代码
2006/10/09 PHP
YII路径的用法总结
2014/07/09 PHP
Yii2中hasOne、hasMany及多对多关联查询的用法详解
2017/02/15 PHP
YII2框架中ActiveDataProvider与GridView的配合使用操作示例
2020/03/18 PHP
JQuery 简便实现页面元素数据验证功能
2007/03/24 Javascript
浅谈jQuery事件绑定原理
2015/01/02 Javascript
JavaScript中指定函数名称的相关方法
2015/06/04 Javascript
jQuery添加删除DOM元素方法详解
2016/01/18 Javascript
JS未跨域操作iframe里的DOM
2016/06/01 Javascript
浅谈JavaScript的全局变量与局部变量
2016/06/10 Javascript
jquery Ajax实现Select动态添加数据
2017/06/08 jQuery
从parcel.js打包出错到选择nvm的全部过程
2018/01/23 Javascript
vuejs router history 配置到iis的方法
2018/09/20 Javascript
解决axios会发送两次请求,有个OPTIONS请求的问题
2018/10/25 Javascript
微信小程序实现动态获取元素宽高的方法分析
2018/12/10 Javascript
实现Vue的markdown文档可以在线运行的方法示例
2018/12/11 Javascript
node.js基于socket.io快速实现一个实时通讯应用
2019/04/23 Javascript
手把手教您实现react异步加载高阶组件
2020/04/07 Javascript
微信小程序学习总结(五)常见问题实例小结
2020/06/04 Javascript
[57:41]Secret vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[47:35]VP vs Pain 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/20 DOTA
python 打印直角三角形,等边三角形,菱形,正方形的代码
2017/11/21 Python
Python使用matplotlib实现绘制自定义图形功能示例
2018/01/18 Python
python urllib爬虫模块使用解析
2019/09/05 Python
Python+Xlwings 删除Excel的行和列
2020/12/19 Python
html5实现图片转圈的动画效果——让页面动起来
2017/10/16 HTML / CSS
Html5移动端适配IphoneX等机型的方法
2019/06/25 HTML / CSS
在C中是否有模拟继承等面向对象程序设计特性的好方法
2012/05/22 面试题
中间件分为哪几类
2016/09/18 面试题
生物技术研究生自荐信
2013/11/12 职场文书
给民警的表扬信
2014/01/08 职场文书
促销活动计划书
2014/05/02 职场文书
产品销售计划书
2014/05/04 职场文书
初中班级口号霸气押韵
2015/12/24 职场文书
Go语言中break label与goto label的区别
2021/04/28 Golang
日元符号 ¥
2022/02/17 杂记