React-native 橋接Android原生開發(fā)

在開發(fā)RN的漫漫長河中,早晚有那么一天要接觸到安卓的原生開發(fā),筆者來介紹一下其中的酸甜苦辣.對于一個不懂android的小白來說,剛開始有點難,不過都是萬事開頭難.語言是想通的,原理也是大徑若一.


1.png

開發(fā)過程中是要集成高德的導航功能,沒有找到好的輪子的,只要寫原生代碼,然后在用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();

實現(xiàn)跳轉.

集成高德導航

對于一個小白直接去在android studio內集成高德地圖剛開始還是有點難度的.不過理解之后感覺還好.簡單些一下遇到的問題,提醒自己,幫助他人

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

解決辦法是右鍵.jar包,有將.jar引入的選項點擊,等待同步即可.
其余的都是些小問題,根據(jù)demo以及文檔輕松解決的不值一提了.

?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容