React-native橋接Android原生開發(fā)詳解
在開發(fā)RN的漫漫長(zhǎng)河中,早晚有那么一天要接觸到安卓的原生開發(fā),筆者來介紹一下其中的酸甜苦辣.對(duì)于一個(gè)不懂a(chǎn)ndroid的小白來說,剛開始有點(diǎn)難,不過都是萬事開頭難.語言是想通的,原理也是大徑若一.
開發(fā)過程中是要集成高德的導(dǎo)航功能,沒有找到好的輪子的,只要寫原生代碼,然后在用JS去調(diào)用原生的導(dǎo)航模塊.
首先注冊(cè)模塊
其意義在與將類注冊(cè)到RN中,才能用JS去調(diào)用
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));意義就是添加一個(gè)安卓原生的activity模塊
這個(gè)模塊可以定義方案,RN可以直接調(diào)用(方法上必須聲明了@ReactMethod才可以)
@ReactMethod
public void showFengMap(String mapID){
Activity currentActivity = getCurrentActivity();
Intent intent = new Intent(currentActivity, 頁面名.class);
currentActivity.startActivity(intent);
}
筆者其中的到嗎是跳轉(zhuǎn)到其他頁面,這里也可以做一些其他的操作.例如直接去分享
聲明
在安卓程序的app內(nèi)的MainApplication內(nèi),
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new AnExampleReactPackage()
);
}
加入剛剛注冊(cè)過的包名
JS調(diào)用原生代碼
import { NativeModules } from 'react-native';
export default NativeModules.NaviActivity;
筆者這里寫了一個(gè)untils/CommonAndroidUntils.js,在需要用的頁面直接引入這個(gè)js文件
CommonAndroidUntils.show();
實(shí)現(xiàn)跳轉(zhuǎn).
集成高德導(dǎo)航
對(duì)于一個(gè)小白直接去在android studio內(nèi)集成高德地圖剛開始還是有點(diǎn)難度的.不過理解之后感覺還好.簡(jiǎn)單些一下遇到的問題,提醒自己,幫助他人
直接拖入的.jar語音包不能引入
解決辦法是右鍵.jar包,有將.jar引入的選項(xiàng)點(diǎn)擊,等待同步即可.
其余的都是些小問題,根據(jù)demo以及文檔輕松解決的不值一提了.
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
- react native實(shí)現(xiàn)監(jiān)控手勢(shì)上下拉動(dòng)效果
- VSCode搭建React Native環(huán)境
- 解決react-native軟鍵盤彈出擋住輸入框的問題
- 詳解react-native WebView 返回處理(非回調(diào)方法可解決)
- 淺談React Native Flexbox布局(小結(jié))
- React Native react-navigation 導(dǎo)航使用詳解
- ReactNative之FlatList的具體使用方法
- ReactNative 之FlatList使用及踩坑封裝總結(jié)
- 用React Native制作一個(gè)簡(jiǎn)單的游戲引擎
相關(guān)文章
React自定義hooks同步獲取useState的最新狀態(tài)值方式
這篇文章主要介紹了React自定義hooks同步獲取useState的最新狀態(tài)值方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了React 實(shí)現(xiàn)車牌鍵盤的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
基于React實(shí)現(xiàn)表單數(shù)據(jù)的添加和刪除詳解
這篇文章主要給大家介紹了基于React實(shí)現(xiàn)表單數(shù)據(jù)的添加和刪除的方法，文中給出了詳細(xì)的示例供大家參考，相信對(duì)大家具有一定的參考價(jià)值，需要的朋友們下面來一起看看吧。2017-03-03
React函數(shù)組件useContext useReducer自定義hooks
這篇文章主要為大家介紹了React函數(shù)組件useContext useReducer自定義hooks示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
圖片懶加載是一種優(yōu)化網(wǎng)頁性能的技術(shù),它允許在用戶滾動(dòng)到圖片位置之前延遲加載圖片,通過懶加載,可以在用戶需要查看圖片時(shí)才加載圖片,避免了不必要的圖片加載,本文給大家介紹了React實(shí)現(xiàn)圖片懶加載的常見方式,需要的朋友可以參考下2024-01-01
state狀態(tài)是組件實(shí)例對(duì)象身上的狀態(tài)，不是組件類本身身上的，是由這個(gè)類締造的實(shí)例身上的。這篇文章主要介紹了React 對(duì)state的理解,需要的朋友可以參考下2021-09-09
這篇文章主要介紹了react中關(guān)于useCallback的用法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
本篇文章中主要介紹了React.js中常用的ES6寫法總結(jié)（推薦），小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-05-05
這篇文章主要為大家詳細(xì)介紹了react四大核心內(nèi)容架構(gòu)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03
React+echarts?(echarts-for-react)?實(shí)現(xiàn)中國(guó)地圖及省份切換功能
這篇文章主要介紹了React+echarts?(echarts-for-react)?畫中國(guó)地圖及省份切換,有足夠的地圖數(shù)據(jù)，可以點(diǎn)擊到街道，示例我只出到市級(jí)，本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)需要的朋友可以參考下2022-11-11