Rumah > hujung hadapan web > tutorial js > React-native之Android原生开发详解

React-native之Android原生开发详解

小云云
Lepaskan: 2018-01-17 17:03:13
asal
1661 orang telah melayarinya

本文主要介绍了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;
  }
}
Salin selepas log masuk

其中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);
  }
Salin selepas log masuk

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

声明

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


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

加入刚刚注册过的包名

JS调用原生代码


import { NativeModules } from &#39;react-native&#39;;

export default NativeModules.NaviActivity;
Salin selepas log masuk

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


CommonAndroidUntils.show();
Salin selepas log masuk

实现跳转.

集成高德导航

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

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

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

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

相关推荐:

React-Native全球化多语言切换工具库react-native-i18n详解

React-Native中props用法详解

React-native 中Image控件的简介

Atas ialah kandungan terperinci React-native之Android原生开发详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan