[JAVA] Wie schreibe ich React Native Bridge ~ Android-Version ~

Ich möchte native Funktionen mit React Native verwenden! Gibt es keine Zeit? Es gibt jedoch keinen Dritten, den ich von GitHub suche. Es ist voller Fehler und wird nicht gewartet. Und so weiter muss auch die einheimische Seite schreiben. Eine solche Situation tritt auf.

Ich möchte eine Methode zur Überbrückung nativer Funktionen mit der React (js) -Seite vorstellen, die in solchen Fällen nützlich ist.

TL;DR

--https: //github.com/react-native-community/react-native-camera --Erstellen Sie eine Modulklasse, die Android-Funktionen direkt verwendet --Erstellen Sie eine Paketklasse, die die ReactPackage-Schnittstelle implementiert, um das erstellte Modul auf der React-Seite zu verarbeiten.

Bei Verwendung der Native-Funktion von Android gibt es Funktionen ohne Ansicht wie Audio- und Hintergrundverarbeitung sowie Funktionen mit Ansicht wie Kamera-Vorschau.

Da die Methode zum Übergeben des Werts an React je nachdem, ob eine Ansicht vorhanden ist oder nicht, unterschiedlich ist, werden wir sie hier separat betrachten.

allgemeiner Teil

Implementieren Sie eine Klasse, die die ReactPackage-Schnittstelle implementiert

1. Registrieren Sie ein natives Modul, das andere Funktionen als die Ansicht zur Verwendung auf der Reaktionsseite bereitstellt.
2. Registrieren Sie den viewManager, um die von Native auf der React-Seite bereitgestellte UI-Komponente zu verwenden.
3. createJSModules ist derzeit nicht erforderlich

RNCameraPackage.java

package ...

import ...

public class RNCameraPackage implements ReactPackage {

    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactApplicationContext) {
        return Arrays.<NativeModule>asList(
                new RCTCameraModule(reactApplicationContext),
                new CameraModule(reactApplicationContext),
                new FaceDetectorModule(reactApplicationContext)
        );
    }

    // Deprecated in RN 0.47
    public List<Class<? extends JavaScriptModule>> createJSModules() {
        return Collections.emptyList();
    }

    @Override
    public List<ViewManager> createViewManagers(ReactApplicationContext reactApplicationContext) {
        return Arrays.<ViewManager>asList(
                new RCTCameraViewManager(),
                new CameraViewManager()
        );
    }
}

Wenn Sie andere native Funktionen als die Benutzeroberfläche überbrücken möchten

Implementieren Sie ein Modul, das ReactContextBaseJavaModule erbt

1. Erstellen Sie in der Java-Datei auf der Seite android / app / src eine Klasse, die die Klasse "ReactContextBaseJavaModule" erbt.

2. Schreiben Sie den Modulnamen

3. Definieren Sie die Konstante, die auf der Reaktionsseite verwendet werden soll (ohne sie).

4. Definieren Sie die auf der Reaktionsseite verwendete Methode. Zu diesem Zeitpunkt wird die Annotation @ReactMethod hinzugefügt.

CameraModule.java

//① 
public class CameraModule extends ReactContextBaseJavaModule {
    private static final String TAG = "CameraModule";

    ...

    public CameraModule(ReactApplicationContext reactContext) {
        super(reactContext);
        mScopedContext = new ScopedContext(reactContext);
    }

    ...

    //②
    @Override
    public String getName() {
        return "RNCameraModule";
    }

    //③
    @Override
    public Map<String, Object> getConstants() {
        return Collections.unmodifiableMap(new HashMap<String, Object>() {
            {
                put("Type", getTypeConstants());
                put("FlashMode", getFlashModeConstants());
                ...
            }
        });
    }

    ...

    //④
    @ReactMethod
    public void takePicture(final ReadableMap options, final int viewTag, final Promise promise) {
        final ReactApplicationContext context = getReactApplicationContext();
        final File cacheDirectory = mScopedContext.getCacheDirectory();
        UIManagerModule uiManager = context.getNativeModule(UIManagerModule.class);
        uiManager.addUIBlock(new UIBlock() {
        @Override
        public void execute(NativeViewHierarchyManager nativeViewHierarchyManager) {
            RNCameraView cameraView = (RNCameraView) nativeViewHierarchyManager.resolveView(viewTag);
                try {
                    if (cameraView.isCameraOpened()) {
                        cameraView.takePicture(options, promise, cacheDirectory);
                    } else {
                        promise.reject("E_CAMERA_UNAVAILABLE", "Camera is not running");
                    }
                } catch (Exception e) {
                  promise.reject("E_CAMERA_BAD_VIEWTAG", "takePictureAsync: Expected a Camera component");
                }
            }
        });
    }

    ...

}

Wenn beim Schreiben von ReactMethod ein Argument von JS vorhanden ist und der Typ Object oder Array ist

Object => ReadableMap
Array => ReadableArray

Ersetzen Sie den Typ durch und verwenden Sie das Argument. Verwenden Sie außerdem für alle Argumente, die von ReactMethod verarbeitet werden.

Wenn Sie UI-basierte native Funktionen überbrücken möchten

1. Importieren Sie "com.facebook.react.uimanager.ViewGroupManager"
2. Erstellen Sie eine Klasse, die ViewGroupManager erbt
3. Überschreiben Sie getName (), um den Modulnamen zu ermitteln
4. createViewInstanceOverride, um die zu verwendende UI-Komponente zu beschreiben und eine Methode zu erstellen, die diese Komponente zurückgibt

CameraViewManager.java

package com.example;

//①
import com.facebook.react.bridge.ReadableArray;
import com.facebook.react.common.MapBuilder;
import com.facebook.react.uimanager.ThemedReactContext;
import com.facebook.react.uimanager.ViewGroupManager;

//②
public class CameraViewManager extends ViewGroupManager<RNCameraView> {
    private static final String REACT_CLASS = "RNCamera";

    @Override
    public void onDropViewInstance(RNCameraView view) {
        view.stop();
        super.onDropViewInstance(view);
    }

    //③
    // Component name that will be called from JavaScript
    @Override
    public String getName() {
        return REACT_CLASS;
    }

    //④
    // Return the view component instantiated with Activity context
    @Override
    public TextView createViewInstance(ThemedReactContext reactContext) {
        return new RNCameraView(themedReactContext);
    }
}

Verwenden Sie das native Modul auf der JS-Seite

1. Rufen Sie NativeModule auf. {Von getName () zurückgegebener Wert}. (Exportieren Sie hier mit "RNCamera.js", damit es als separate Datei verwendet werden kann.

OriginalCamera.js

import { NativeModules } from `react-native`;

export default NativeModules.RNCameraModule;