本文和大家分享的主要是ReactNative調(diào)用android原生模塊相關(guān)內(nèi)容，一起來(lái)看看吧，希望對(duì)大家學(xué)習(xí)android有所幫助。

　　有時(shí)候App需要訪問(wèn)平臺(tái)API，但React Native可能還沒(méi)有相應(yīng)的模塊包裝；或者你需要復(fù)用一些Java代碼，而不是用Javascript重新實(shí)現(xiàn)一遍；又或者你需要實(shí)現(xiàn)某些高性能的、多線程的代碼，譬如圖片處理、數(shù)據(jù)庫(kù)、或者各種高級(jí)擴(kuò)展等等。

　　我們把React Native設(shè)計(jì)為可以在其基礎(chǔ)上編寫真正的原生代碼，并且可以訪問(wèn)平臺(tái)所有的能力。要想實(shí)現(xiàn)訪問(wèn)Android原生API，總結(jié)一下，主要有以下幾個(gè)步驟：

　　1. 創(chuàng)建一個(gè)原生模塊

　　這個(gè)原生模塊是一個(gè)繼承ReactContextBaseJavaModule的Java類,它可以實(shí)現(xiàn)一些JavaScript所調(diào)用的原生功能。我們的目標(biāo)是可以在JavaScript里寫ToastAndroid.show(‘Awesome’, ToastAndroid.SHORT);，來(lái)調(diào)起一個(gè)Toast通知。例如：

　　public class RnTest extends ReactContextBaseJavaModule {

　　public RnTest(ReactApplicationContext reactContext) {

　　super(reactContext);

　　}

　　// ReactContextBaseJavaModule要求派生類實(shí)現(xiàn)getName方法。這個(gè)函數(shù)用于返回一個(gè)字符串

　　// 這個(gè)字符串用于在JavaScript端標(biāo)記這個(gè)原生模塊

　　@Override

　　public String getName() {

　　return "ToastByAndroid";

　　}

　　// 獲取應(yīng)用包名

　　// 要導(dǎo)出一個(gè)方法給JavaScript使用，Java方法需要使用注解@ReactMethod

　　@ReactMethod

　　public void getPackageName() {

　　String name = getReactApplicationContext().getPackageName();

　　Toast.makeText(getReactApplicationContext(),name,Toast.LENGTH_LONG).show();

　　}

　　}

　　ReactContextBaseJavaModule要求派生類實(shí)現(xiàn)getName方法。這個(gè)函數(shù)用于返回一個(gè)字符串名字，這個(gè)名字在JavaScript端標(biāo)記這個(gè)模塊。這里我們把這個(gè)模塊叫做ToastByAndroid，這樣就可以在JavaScript中通過(guò)React.NativeModules.ToastByAndroid訪問(wèn)到這個(gè)模塊。

　　注意：模塊名前的RCT前綴會(huì)被自動(dòng)移除。所以如果返回的字符串為”RCTToastAndroid”，在JavaScript端依然通過(guò)React.NativeModules.ToastByAndroid訪問(wèn)到這個(gè)模塊。

　　2. 注冊(cè)模塊

　　要使JavaScript端調(diào)用到原生模塊還需注冊(cè)這個(gè)原生模塊，需要實(shí)現(xiàn)一個(gè)類實(shí)現(xiàn)ReactPackage接口，并實(shí)現(xiàn)其中的抽象方法。例如：

　　public class ExampleReactPackage implements ReactPackage {

　　@Override

　　public ListcreateNativeModules(ReactApplicationContext reactContext) {

　　Listmodules = new ArrayList<>();

　　modules.add(new RnTest(reactContext));

　　return modules;

　　}

　　@Override

　　public List<Class> createJSModules() {</?>

　　return Collections.emptyList();

　　}

　　@Override

　　public ListcreateViewManagers(ReactApplicationContext reactContext) {

　　return Collections.emptyList();

　　}

　　}

　　MainApplication聲明

　　除了上面的步驟外，還需在MainApplication.java文件中的getPackages方法中，實(shí)例化上面的注冊(cè)類。例如：

　　@Override

　　protected ListgetPackages() {

　　return Arrays.asList(

　　new MainReactPackage(),

　　// 實(shí)例化注冊(cè)類

　　new ExampleReactPackage());

　　}

　　};

　　3. JS調(diào)用android原生方法

　　3.1 引入NativeModules模塊

　　import { NativeModules } from 'react-native';

　　3.2 調(diào)用Android原生方法

　　var rnToastAndroid = NativeModules.ToastByAndroid;

　　rnToastAndroid.getPackageName();

　　4. 獲取android返回值

　　提供給js調(diào)用的原生android方法的返回類型必須是void，React Native的跨語(yǔ)言訪問(wèn)是異步進(jìn)行的，所以想要給JavaScript返回一個(gè)值的唯一辦法是使用回調(diào)函數(shù)或者發(fā)送事件。

　　4.1 回調(diào)函數(shù)

　　Callback是React.bridge中的一個(gè)接口，它作為ReactMethod的一個(gè)傳參，用來(lái)映射JavaScript的回調(diào)函數(shù)（function）。Callback接口只定義了一個(gè)方法invoke，invoke接受多個(gè)參數(shù)，這個(gè)參數(shù)必須是react.bridge中支持的參數(shù)。

　　Android端代碼：

　　@ReactMethod

　　public void tryCallBack(String name,String psw,Callback errorCallback,Callback successCallback){

　　try{

　　if(TextUtils.isEmpty(name)&&TextUtils.isEmpty(psw)){

　　// 失敗時(shí)回調(diào)

　　errorCallback.invoke("user or psw  is empty");

　　}

　　// 成功時(shí)回調(diào)

　　successCallback.invoke("add user success");

　　}catch(IllegalViewOperationException e){

　　// 失敗時(shí)回調(diào)

　　errorCallback.invoke(e.getMessage());

　　}

　　}

　　rn端代碼：

　　var rnToastAndroid = NativeModules.ToastByAndroid;

　　rnToastAndroid.tryCallBack("luo","131",(errorCallback)=>{alert(errorCallback)},(successCallback)=>{alert(successCallback);});

　　5.調(diào)用測(cè)試

　　android主動(dòng)向rn發(fā)送消息。

　　5.1 android端代碼

　　public  static void sendEvent(ReactContext reactContext, String eventName, int status)

　　{

　　System.out.println("reactContext="+reactContext);

　　reactContext

　　.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)

　　.emit(eventName,status);

　　}

　　5.2 RN端代碼

　　// eventName為5.1中的eventName，reminder為5.1中的status

　　DeviceEventEmitter.addListener(eventName, (reminder) => {

　　console.log(reminder):

　　});

　　RN調(diào)用Android原生模塊的代碼如下：

const RNBridgeModule = NativeModules.RNBridgeModule;

nativeLanuchApp(message) {

    RNBridgeModule.nativePlayVideo(message);

  }

 

  <TouchableOpacity onPress={() => {

                            this.nativeLanuchApp("111");

                        }} >

      <Text >

        try

      </Text>

    </TouchableOpacity>　　

 

 

來(lái)源： CSDN