React Native te permite crear aplicaciones para todo tipo dispositivos móviles utilizando Javascript, esto permite una gran flexibilidad y disminuye la curva de aprendizaje.
React Native permite acceso a diferentes API nativas para los distintos sistemas operativos (Android, iOS), pero en ciertas ocasiones esto no es suficiente y es necesario desarrollar soluciones en código nativo: Java/Kotlin o Object-C/Swift.
Módulos nativos
React Native permite que el uso de código 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.
Android
En el caso de Android, el código nativo puede venir distribuido como una paquete jar o aar o creado manualmente como un módulo 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.
- Abre tu proyecto en Android Studio, abre sólo el directorio android.
- Haz click en
File > New Module
- Una ventana flotante se mostrará en donde puedes elegir el tipo de módulo 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 dependencias:dependencies { compile project(":my-library-module") }
- Haz click en Sync Project With Gradle Files.
Es posible que tu nuevo módulo 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 módulo deentro del proyecto, lo llamaremos SDKModule\
Este nuevo módulo implementa una clase que implementa ReactContextBaseJavaModule
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étodo getName
. 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 módulo. Esta nueva clase permitirá el registro del módulo. 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 principal MainApplication.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 módulo 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);
});
Conclusión
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 módulo 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.
Top comments (0)