React-native橋接Android原生開發詳解,

來源:互聯網
上載者:User

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以及文檔輕鬆解決的不值一提了.

以上就是本文的全部內容,希望對大家的學習有所協助,也希望大家多多支援幫客之家。

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.