React-native橋接Android原生開(kāi)發(fā)詳解
在開(kāi)發(fā)RN的漫漫長(zhǎng)河中,早晚有那么一天要接觸到安卓的原生開(kāi)發(fā),筆者來(lái)介紹一下其中的酸甜苦辣.對(duì)于一個(gè)不懂a(chǎn)ndroid的小白來(lái)說(shuō),剛開(kāi)始有點(diǎn)難,不過(guò)都是萬(wàn)事開(kāi)頭難.語(yǔ)言是想通的,原理也是大徑若一.
開(kāi)發(fā)過(guò)程中是要集成高德的導(dǎo)航功能,沒(méi)有找到好的輪子的,只要寫(xiě)原生代碼,然后在用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, 頁(yè)面名.class);
currentActivity.startActivity(intent);
}
筆者其中的到嗎是跳轉(zhuǎn)到其他頁(yè)面,這里也可以做一些其他的操作.例如直接去分享
聲明
在安卓程序的app內(nèi)的MainApplication內(nèi),
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new AnExampleReactPackage()
);
}
加入剛剛注冊(cè)過(guò)的包名
JS調(diào)用原生代碼
import { NativeModules } from 'react-native';
export default NativeModules.NaviActivity;
筆者這里寫(xiě)了一個(gè)untils/CommonAndroidUntils.js,在需要用的頁(yè)面直接引入這個(gè)js文件
CommonAndroidUntils.show();
實(shí)現(xiàn)跳轉(zhuǎn).
集成高德導(dǎo)航
對(duì)于一個(gè)小白直接去在android studio內(nèi)集成高德地圖剛開(kāi)始還是有點(diǎn)難度的.不過(guò)理解之后感覺(jué)還好.簡(jiǎn)單些一下遇到的問(wèn)題,提醒自己,幫助他人
直接拖入的.jar語(yǔ)音包不能引入
解決辦法是右鍵.jar包,有將.jar引入的選項(xiàng)點(diǎn)擊,等待同步即可.
其余的都是些小問(wè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軟鍵盤(pán)彈出擋住輸入框的問(wèn)題
- 詳解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.Children的用法詳解，幫助大家更好的理解和學(xué)習(xí)使用React框架，感興趣的朋友可以了解下2021-04-04
React+TypeScript項(xiàng)目中使用CodeMirror的步驟
CodeMirror被廣泛應(yīng)用于許多Web應(yīng)用程序和開(kāi)發(fā)工具，之前做需求用到過(guò)codeMirror這個(gè)工具，覺(jué)得還不錯(cuò)，功能很強(qiáng)大，所以記錄一下改工具的基礎(chǔ)用法，對(duì)React+TypeScript項(xiàng)目中使用CodeMirror的步驟感興趣的朋友跟隨小編一起看看吧2023-07-07
函數(shù)式組件的基本意義就是,組件實(shí)際上是一個(gè)函數(shù),不是類,下面這篇文章主要給大家介紹了關(guān)于React中函數(shù)組件的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08
詳解React Native開(kāi)源時(shí)間日期選擇器組件(react-native-datetime)
本篇文章主要介紹了詳解React Native開(kāi)源時(shí)間日期選擇器組件(react-native-datetime)，具有一定的參考價(jià)值，有興趣的可以了解一下2017-09-09
本篇文章主要介紹了基于react后端渲染模板引擎noox發(fā)布使用，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-01-01
這篇文章主要介紹了react國(guó)際化react-intl的使用,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05
在React中編寫(xiě)class樣式的方法總結(jié)
在TypeScript (TSX) 中編寫(xiě) CSS 樣式類有幾種方法,包括使用純 CSS、CSS Modules、Styled Components 等,本文給大家介紹了幾種常見(jiàn)方法的示例,通過(guò)代碼示例講解的非常詳細(xì),需要的朋友可以參考下2024-07-07
這篇文章主要介紹了React?中的列表渲染為什么要加?key,在?React?中我們經(jīng)常需要渲染列表，比如展示好友列表，文中給大家介紹了列表渲染不提供?key?會(huì)如何，通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友一起看看吧2022-07-07
React 組件轉(zhuǎn) Vue 組件的命令寫(xiě)法
本文先介紹兩個(gè)框架的組件共性和不兼容的地方，再介紹react-to-vue的使用和原理,需要的朋友可以參考下2018-02-02
本篇文章主要介紹了詳解在React里使用"Vuex"，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-04-04