Agregar Modulos Nativos a Una Aplicación React Native

React Native는 Javascript를 사용하여 응용 프로그램을 생성할 수 있도록 허용하고 있으며, 유연성을 크게 향상시키거나 중단할 수 있습니다.

React Native는 다른 API 네이티브 액세스 허용 시스템 운영 체제(Android, iOS)를 사용할 수 있지만, 기본적으로 Java/Kotlin 또는 Object-C/Swift를 사용하는 경우에는 필요하지 않습니다.

모둘로스 원주민



React Native permite que el uso de codigo nativo para utilizar el potencial de cada plataforma, es una característica avanzada y que requiere algunos conocimientos más allá de Javascript y React, pero si la plataforma no te ofrece alguna característica que requieres, es posible crearla.

기계적 인조 인간



En el caso de Android, el código nativo puede venir distribuido como una paquete jar o aar o creado manualmente como un modulo dentro de tu aplicación.

Quizás necesitas utilizar un SDK o librería externa, en el caso de paquetes jar o aar puedes agregarlos utilizando Android Studio .
  • Android 스튜디오에서 프로젝트를 시작하면 Android에서 단독으로 감독할 수 있습니다.
  • 해즈클릭앤File > New Module
  • Una ventana flotante se mostrará en donde puedes elegir el tipo de modulo que quieres importar, en este caso .JAR/.AAR. Luego presiona siguiente



  • Ahora abre el archivo build.gradle de tu app y agrega una nueva linea al bloque de dependsencias:

    종속성 { 컴파일 프로젝트(":my-library-module") }
  • Gradle 파일과 프로젝트 동기화를 클릭하십시오.


  • Es 가능한 que tu nuevo modulo ya implemente lo necesarioa para hacer su API disponible en tu proyecto React Native, en caso de no ser así tendras que hacerlo manualmente

    Lo primero es crear un nuevo modulo deentro del proyecto, lo llamaremosSDKModule\
    Este nuevo modulo implementa una clase que implementaReactContextBaseJavaModule
    package com.myapp.sdk;
    
    import com.facebook.react.bridge.Callback;
    import com.facebook.react.bridge.ReactApplicationContext;
    import com.facebook.react.bridge.ReactContextBaseJavaModule;
    import com.facebook.react.bridge.ReactMethod;
    
    public class SDKModule extends ReactContextBaseJavaModule {
       //constructor
       public SDKModule(ReactApplicationContext reactContext) {
           super(reactContext);
       }
       @Override
       public String getName() {
           return "SDK";
       }
       //Custom function that we are going to export to JS
       @ReactMethod
       public void getDeviceName(Callback cb) {
           try{
               cb.invoke(null, android.os.Build.MODEL);
           }catch (Exception e){
               cb.invoke(e.toString(), null);
           }
       }
    }
    

    Esta clase debe implementar el métodogetName . Luego tendrás que agregar los métodos que quieres exponer para su uso en Javascript. Estos métodos deben ser deecorados con la etiqueta@ReactMethod
    En este ejemplo el método getDeviceName podrá ser utilizando desde tu código Javascript.

    Pero falta un paso más. Es necesario crear un package con el nuevo modulo. Esta nueva clase permitirá el registro del modulo. Para esto bastará con crear un nuevo archivo llamado SDKPackage
    package com.myapp.sdk;
    
    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 SDKPackge implements ReactPackage {
    
       @Override
       public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
           return Collections.emptyList();
       }
    
       @Override
       public List<NativeModule> createNativeModules(
               ReactApplicationContext reactContext) {
           List<NativeModule> modules = new ArrayList<>();
           //We import the module file here
           modules.add(new SDKModule(reactContext));
    
           return modules;
       }
    
       // Backward compatibility
       public List<Class<? extends JavaScriptModule>> createJSModules() {
           return new ArrayList<>();
       }
    }
    

    Finalmente debemos registrar el paquete en la clase principalMainApplication.java
       import com.notetaker.sdk.SDKPackage;
    
      @Override
      protected List<ReactPackage> getPackages() {
        return Arrays.<ReactPackage>asList(
            new MainReactPackage(),
            new SDKPackage() //Add your package here
        );
      }
    };
    

    Listo, ahora tu nuevo modulo estará disponible dentro del objeto NativeModules en tu app React Native, bajo el nombre que definiste en el método getName
    import {NativeModules} from 'react-native';
    NativeModules.SDK.getDeviceName((err ,name) => {
    console.log(err, name);
    });

    결론



    React Native es una plataforma que permite el desarrollo rápido y seguro de aplicaciones móviles, pero no tiene soporte (aún) para cada una de las caracterísitcas de los dispositivos o a veces el soporte ofrecido por Defecto no es suficiente, en estos casos querrás crear un modulo nativo, que no más que código Java - en el caso de Android - que te permite definir como utilizar cierta característica. Este código puede ser expuesto a tu aplicación Javascript tal como se describe en el ejemplo.

    좋은 웹페이지 즐겨찾기