React Native中的Android原生模塊

作者：佚名 2016-11-23 16:48:20

當(dāng)使用 React Native 開發(fā) Android 應(yīng)用時，你可能需要使用沒有被 React Native 封裝的模塊。但你可以使用 Java 編寫原生模塊，然后選擇性的暴露公共接口到 React Native。

[[176954]]

當(dāng)使用 React Native 開發(fā) Android 應(yīng)用時，你可能需要使用沒有被 React Native 封裝的模塊。但你可以使用 Java 編寫原生模塊，然后選擇性的暴露公共接口到 React Native。一起來試一下!

我們要寫一個什么東西

在寫這篇文章時，React Native 包含了 ImagePickerIOS 組件，但是在 Android 平臺上卻沒有對應(yīng)的 ImagePicker 組件。我們接下來就要為 Android 構(gòu)建一個簡單的、和 ImagePickerIOS 大致相仿的 ImagePicker。

編寫一個 React Native 的 Android 原生模塊需要以下步驟：

創(chuàng)建一個 ReactPackage，把很多模塊(Native 和 Javascript)包含在一起，然后在 MainActivity 中的 getPackages 方法引用。
創(chuàng)建一個 Java 類，繼承 ReactContextBaseJavaModule 并實現(xiàn)需要的接口，然后注冊到我們的 ReactPackage。
覆寫上述類的 getName 方法，這個方法會作為 Javascript 的調(diào)用方法名。
使用 @ReactMethod 注解把需要的公共方法暴露給 Javascript。
***，在 Javascript 中通過 NativeModules 導(dǎo)入你的模塊。

讓我們一起實踐一下。

創(chuàng)建一個 ReactPackage

啟動 AndroidStudio 并且導(dǎo)航到 MyApp/android/app/src/main/java/com/myapp/MainActivity.java。它應(yīng)該看起來像這樣：

package com.myapp; 
 
import com.facebook.react.ReactActivity; 
import com.facebook.react.ReactPackage; 
import com.facebook.react.shell.MainReactPackage; 
 
import java.util.Arrays; 
import java.util.List; 
 
public class MainActivity extends ReactActivity { 
 
    @Override 
    protected String getMainComponentName() { 
        return "MyApp"; 
    } 
 
    @Override 
    protected boolean getUseDeveloperSupport() { 
        return BuildConfig.DEBUG; 
    } 
 
    @Override 
    protected List<ReactPackage> getPackages() { 
        return Arrays.<ReactPackage>asList( 
            new MainReactPackage() 
        ); 
    } 
}

我們先來引入一個尚未定義的包：

import com.myapp.imagepicker.*; // import the package 
 
public class MainActivity extends ReactActivity { 
    @Override 
    protected List<ReactPackage> getPackages() { 
        return Arrays.<ReactPackage>asList( 
            new MainReactPackage(), 
            new ImagePickerPackage() // include it in getPackages 
        ); 
    } 
}

現(xiàn)在我們來編寫那個包。我們將會為它創(chuàng)建一個叫 imagepicker 的新目錄并且寫入 ImagePickerPackage:

package com.myapp.imagepicker; 
 
import com.facebook.react.ReactPackage; 
import com.facebook.react.bridge.JavaScriptModule; 
import com.facebook.react.bridge.NativeModule; 
import com.facebook.react.bridge.ReactApplicationContext; 
import com.facebook.react.uimanager.ViewManager; 
 
import java.util.ArrayList; 
import java.util.Collections; 
import java.util.List; 
 
public class ImagePickerPackage implements ReactPackage { 
    @Override 
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) { 
        List<NativeModule> modules = new ArrayList<>(); 
 
        modules.add(new ImagePickerModule(reactContext)); 
 
        return modules; 
    } 
 
    @Override 
    public List<Class<? extends JavaScriptModule>> createJSModules() { 
        return Collections.emptyList(); 
    } 
 
    @Override 
    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) { 
        return Collections.emptyList(); 
    } 
}

現(xiàn)在我們已經(jīng)創(chuàng)建了一個包并且包含進(jìn) MainActivity 中了。

創(chuàng)建一個 ReactContextBaseJavaModule

我們將會以創(chuàng)建 ImagePickerModule 開始，繼承 ReactContextBaseJavaModule。

package com.myapp.imagepicker; 
 
import com.facebook.react.bridge.ReactContextBaseJavaModule; 
 
public class ImagePickerModule extends ReactContextBaseJavaModule { 
    public ImagePickerModule(ReactApplicationContext reactContext) { 
        super(reactContext); 
    } 
}

這是一個好的開始，為了 React Native 能從 NativeModules 找到我們的模塊，我們需要覆寫 getName 方法。

@Override 
public String getName() { 
    return "ImagePicker"; 
}

我們現(xiàn)在有了一個可以被 JavaScript 代碼導(dǎo)入的 native 模塊，讓它做些有趣的事情吧。

暴露方法

ImagePickerIOS 定義了 openSelectDialog 方法，可以傳遞配置對象、失敗、成功的回調(diào)。讓我們在 ImagePickerModule 中定義一個相似的方法。

import com.facebook.react.bridge.Callback; 
import com.facebook.react.bridge.ReadableMap; 
 
public class ImagePickerModule extends ReactContextBaseJavaModule { 
    @ReactMethod 
    public void openSelectDialog(ReadableMap config, Callback successCallback, Callback cancelCallback) { 
        Activity currentActivity = getCurrentActivity(); 
     
        if (currentActivity == null) { 
            cancelCallback.invoke("Activity doesn't exist"); 
            return; 
        } 
    } 
}

這里我們從 React Native 中導(dǎo)入了 Callback 和 ReadableMap 來對應(yīng) JavaScript 中的 function 和 object。我們?yōu)檫@個方法加上@ReactMethod 注解，從而使它作為 ImagePicker 的一部分被 JavaScript 引用。

在方法體中我們獲取當(dāng)前的 activity，如果沒有獲取到 activity，就調(diào)用 cancel 的回調(diào)方法。我們現(xiàn)在有了一個可以運(yùn)行的方法，但是它還不能做任何有趣的事情。讓我們用它打開相冊。

public class ImagePickerModule extends ReactContextBaseJavaModule { 
    private static final int PICK_IMAGE = 1; 
 
    private Callback pickerSuccessCallback; 
    private Callback pickerCancelCallback; 
 
    @ReactMethod 
    public void openSelectDialog(ReadableMap config, Callback successCallback, Callback cancelCallback) { 
        Activity currentActivity = getCurrentActivity(); 
 
        if (currentActivity == null) { 
            cancelCallback.invoke("Activity doesn't exist"); 
            return; 
        } 
 
        pickerSuccessCallback = successCallback; 
        pickerCancelCallback = cancelCallback; 
 
        try { 
            final Intent galleryIntent = new Intent(); 
 
            galleryIntent.setType("image/*"); 
            galleryIntent.setAction(Intent.ACTION_GET_CONTENT); 
 
            final Intent chooserIntent = Intent.createChooser(galleryIntent, "Pick an image"); 
 
            currentActivity.startActivityForResult(chooserIntent, PICK_IMAGE); 
        } catch (Exception e) { 
            cancelCallback.invoke(e); 
        } 
    } 
}

首先，我們設(shè)置了回調(diào)，然后，我們創(chuàng)建了一個 Intent 并把它傳遞給 startActivityForResult。***，我們把所有的東西都放在 try/catch 塊中來處理可能發(fā)生的異常。

當(dāng)你調(diào)用 openSelectDialog 時，你應(yīng)該可以看到一個相冊了。然而，當(dāng)你選擇一張圖片時，相冊并不做任何事情。為了能夠處理圖片數(shù)據(jù)，我們需要在模塊中處理 activity 的返回值。

首先，我們需要在 react context 中添加 activity event listener：

public class ImagePickerModule extends ReactContextBaseJavaModule implements ActivityEventListener { 
    public ImagePickerModule(ReactApplicationContext reactContext) { 
        super(reactContext); 
        reactContext.addActivityEventListener(this); 
    } 
}

現(xiàn)在我們可以獲取到相冊返回的數(shù)據(jù)了。

@Override 
public void onActivityResult(final int requestCode, final int resultCode, final Intent intent) { 
    if (pickerSuccessCallback != null) { 
        if (resultCode == Activity.RESULT_CANCELED) { 
            pickerCancelCallback.invoke("ImagePicker was cancelled"); 
        } else if (resultCode == Activity.RESULT_OK) { 
            Uri uri = intent.getData(); 
 
            if (uri == null) { 
                pickerCancelCallback.invoke("No image data found"); 
            } else { 
                try { 
                    pickerSuccessCallback.invoke(uri); 
                } catch (Exception e) { 
                    pickerCancelCallback.invoke("No image data found"); 
                } 
            } 
        } 
    } 
}

在這里我們應(yīng)該可以通過 success callback 獲取到圖片 URI。

NativeModules.ImagePicker.openSelectDialog( 
  {}, // no config yet  
  (uri) => { console.log(uri) },  
  (error) => { console.log(error) } 
)

為了和 ImagePickerIOS 的表現(xiàn)大致相仿，我們可以允許用戶選擇圖片、視頻或者直接打開相機(jī)。這些功能的寫法和上面基本一致，我們將會把它留給讀者作為練習(xí)。

責(zé)任編輯：龐桂玉來源： segmentfault