[JAVA] Comment écrire React Native Bridge ~ Version Android ~

Je souhaite utiliser des fonctions natives avec React Native! N'y a-t-il pas un temps? Cependant, je ne recherche aucun tiers sur GitHub. Il est plein de bugs et n'est pas maintenu. Et ainsi de suite, le côté natif doit aussi écrire. Une situation comme celle-ci se produit.

Je voudrais partager une méthode de pontage des fonctions natives du côté React (js), ce qui est utile dans de tels cas.

TL;DR

• Le sujet est https://github.com/react-native-community/react-native-camera --Créez une classe de module qui utilise directement les fonctions Android --Créez une classe de package qui implémente l'interface ReactPackage pour gérer le module créé du côté React.

Lorsque vous utilisez les fonctions natives d'Android, il existe des fonctions sans vue telles que le traitement audio et d'arrière-plan, et des fonctions avec vue telles que l'aperçu de la caméra.

Étant donné que la méthode de transmission de la valeur à React diffère selon qu'il existe une vue ou non, nous la considérerons séparément ici.

partie commune

Implémenter une classe qui implémente l'interface ReactPackage

1. Enregistrez un module natif qui fournit des fonctions autres que la vue à utiliser du côté React.
2. Enregistrez le viewManager pour utiliser le composant d'interface utilisateur fourni par Native du côté React.
3. createJSModules n'est actuellement pas requis

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()
        );
    }
}

Si vous souhaitez relier des fonctions natives autres que l'interface utilisateur

Implémenter un module qui hérite de ReactContextBaseJavaModule

1. Dans le fichier java du côté android / app / src, créez une classe qui hérite de la classe ReactContextBaseJavaModule.

2. Écrivez le nom du module

3. Définissez la constante à utiliser côté React (sans elle)

4. Définissez la méthode utilisée côté React. À ce stade, l'annotation @ReactMethod est ajoutée.

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");
                }
            }
        });
    }

    ...

}

Lors de l'écriture de ReactMethod, s'il existe un argument de JS et que le type est Object ou Array

Object => ReadableMap
Array => ReadableArray

Remplacez le type par et utilisez l'argument. Utilisez également pour tous les arguments gérés par ReactMethod.

Si vous souhaitez relier les fonctions natives basées sur l'interface utilisateur

1. Importez com.facebook.react.uimanager.ViewGroupManager
2. Créez une classe qui hérite de ViewGroupManager
3. Remplacez getName () pour déterminer le nom du module
4. createViewInstanceOverride pour décrire le composant d'interface utilisateur que vous souhaitez utiliser et créer une méthode qui retourne ce composant

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);
    }
}

Utiliser le module natif côté JS

1. Appelez NativeModule. {Valeur renvoyée par getName ()}. (Ici, exportez avec RNCamera.js pour qu'il puisse être utilisé comme fichier séparé.

OriginalCamera.js

import { NativeModules } from `react-native`;

export default NativeModules.RNCameraModule;