Crea una biblioteca para tu módulo

Traducción Beta No Oficial

Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →

React Native cuenta con un ecosistema rico en bibliotecas para resolver problemas comunes. Recopilamos estas bibliotecas en el sitio reactnative.directory, un recurso excelente que todo desarrollador de React Native debería guardar en sus favoritos.

En ocasiones, puedes estar trabajando en un módulo que vale la pena extraer como biblioteca independiente para reutilizar el código. Esto podría ser una biblioteca que quieras usar en todas tus aplicaciones, un componente de código abierto para distribuir en el ecosistema, o incluso una biblioteca que desees comercializar.

En esta guía aprenderás:

• cómo extraer un módulo como biblioteca

• cómo distribuir la biblioteca usando NPM

Extraer el módulo como biblioteca

Puedes usar la herramienta create-react-native-library para crear una nueva biblioteca. Esta herramienta configura automáticamente todo el código base necesario: archivos de configuración y archivos específicos para cada plataforma. Además, incluye un menú interactivo que te guía durante el proceso de creación.

Para extraer un módulo como biblioteca independiente, sigue estos pasos:

1. Crear la nueva biblioteca

2. Mover el código de la aplicación a la biblioteca

3. Actualizar el código según la nueva estructura

4. Publicarla

1. Crear una biblioteca

1. Inicia el proceso de creación ejecutando el comando:

sh

npx create-react-native-library@latest <Name of Your Library>

2. Asigna un nombre válido para tu módulo (según convenciones npm: solo minúsculas, usando - para separar palabras).

3. Proporciona una descripción del paquete.

4. Completa el formulario hasta llegar a la pregunta "What type of library do you want to develop?"

5. Para esta guía, selecciona la opción Turbo module. Ten en cuenta que puedes crear bibliotecas tanto para la Nueva Arquitectura como para la Arquitectura Legacy.

6. Luego, elige si prefieres una biblioteca que acceda directamente a la plataforma (Kotlin & Objective-C) o una con código compartido en C++ (para Android e iOS).

7. Finalmente, selecciona Test App como última opción. Esto creará una aplicación de prueba preconfigurada dentro de la carpeta de la biblioteca.

Al terminar el menú interactivo, la herramienta crea una carpeta cuya estructura se ve así en Visual Studio Code:

Explora libremente el código generado. Las partes más importantes son:

• Carpeta android: contiene el código específico para Android

• Carpeta cpp: aloja el código en C++

• Carpeta ios: contiene el código específico para iOS

• Carpeta src: incluye el código JavaScript

El archivo package.json ya está configurado con toda la información que proporcionamos a la herramienta create-react-native-library, incluyendo el nombre y la descripción del paquete. Nota que el package.json también está configurado para ejecutar Codegen.

json

  "codegenConfig": {
    "name": "RN<your module name>Spec",
    "type": "all",
    "jsSrcsDir": "src",
    "outputDir": {
      "ios": "ios/generated",
      "android": "android/generated"
    },
    "android": {
      "javaPackageName": "com.<name-of-the-module>"
    }
  },

Finalmente, la biblioteca ya contiene toda la infraestructura necesaria para vincularse con proyectos iOS y Android.

2. Copia el código desde tu aplicación

El resto de la guía asume que tienes un Turbo Native Module local en tu aplicación, creado siguiendo las guías disponibles: módulos nativos específicos por plataforma o módulos multiplataforma en C++. Este proceso también aplica para componentes y módulos de arquitectura Legacy, aunque deberás adaptar los archivos a copiar y actualizar.

1. [No requerido para módulos y componentes de arquitectura heredada] Mueve el código que tienes en la carpeta specs de tu aplicación a la carpeta src creada por create-react-native-library.

2. Actualiza el archivo index.ts para exportar correctamente la especificación del Turbo Native Module, de modo que sea accesible desde la biblioteca. Por ejemplo:

ts

import NativeSampleModule from './NativeSampleModule';

export default NativeSampleModule;

3. Copia el módulo nativo:

   • Reemplaza el código en android/src/main/java/com/<name-of-the-module> con el código que escribiste en la aplicación para tu módulo nativo, si aplica.
   • Reemplaza el código en la carpeta ios con el código que escribiste en tu aplicación para tu módulo nativo, si aplica.
   • Reemplaza el código en la carpeta cpp con el código que escribiste en tu aplicación para tu módulo nativo, si aplica.

4. [No requerido para módulos y componentes de arquitectura heredada] Actualiza todas las referencias del nombre de especificación anterior al nuevo nombre, el definido en el campo codegenConfig del package.json de la biblioteca. Por ejemplo, si en el package.json de la aplicación configuraste AppSpecs como codegenConfig.name y en la biblioteca se llama RNNativeSampleModuleSpec, debes reemplazar cada aparición de AppSpecs por RNNativeSampleModuleSpec.

¡Eso es todo! Has movido todo el código necesario de tu aplicación a una biblioteca separada.

Probar tu biblioteca

create-react-native-library incluye una aplicación de ejemplo útil que ya está configurada para funcionar con la biblioteca. ¡Es una excelente manera de probarla!

Si revisas la carpeta example, encontrarás la misma estructura de una nueva aplicación React Native que puedes crear desde react-native-community/template.

Para probar tu biblioteca:

1. Navega a la carpeta example.

2. Ejecuta yarn install para instalar todas las dependencias.

3. Solo para iOS, instala CocoaPods: cd ios && pod install.

4. Construye y ejecuta Android con yarn android desde la carpeta example.

5. Construye y ejecuta iOS con yarn ios desde la carpeta example.

Usar tu biblioteca como módulo local

Existen escenarios donde quizás quieras reutilizar tu biblioteca como módulo local para tus aplicaciones, sin publicarla en NPM.

En este caso, podrías tener tu biblioteca como un directorio hermano de tus aplicaciones.

shell

Development
├── App
└── Library

Puedes usar la biblioteca creada con create-react-native-library también en este caso.

1. Agrega tu biblioteca a tu aplicación navegando a la carpeta App y ejecutando yarn add ../Library.

2. Solo para iOS, navega a la carpeta App/ios y ejecuta bundle exec pod install para instalar tus dependencias.

3. Actualiza el código en App.tsx para importar el contenido de tu biblioteca. Por ejemplo:

tsx

import NativeSampleModule from '../Library/src/index';

Si ejecutas tu aplicación ahora, Metro no encontraría los archivos JS que necesita servir. Esto ocurre porque Metro se ejecuta desde la carpeta App y no tendría acceso a los archivos JS ubicados en Library. Para solucionarlo, actualiza el archivo metro.config.js como sigue:

diff

const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');

/**
 * Metro configuration
 * https://reactnative.dev/docs/metro
 *
 * @type {import('metro-config').MetroConfig}
 */
+ const path = require('path');

- const config = {}
+ const config = {
+  // Make Metro able to resolve required external dependencies
+  watchFolders: [
+    path.resolve(__dirname, '../Library'),
+  ],
+  resolver: {
+    extraNodeModules: {
+      'react-native': path.resolve(__dirname, 'node_modules/react-native'),
+    },
+  },
+};

module.exports = mergeConfig(getDefaultConfig(__dirname), config);

La configuración watchFolders indica a Metro que monitoree archivos y cambios en rutas adicionales, en este caso ../Library que contiene el archivo src/index necesario. La propiedad resolver es necesaria para proporcionar a la biblioteca el código React Native usado por la aplicación. Sin este resolver adicional, las importaciones de React Native en la biblioteca fallarían.

En este punto, puedes construir y ejecutar tu aplicación como de costumbre:

• Compilar y ejecutar Android con yarn android desde la carpeta example.

• Compilar y ejecutar iOS con yarn ios desde la carpeta example.

Publicar la biblioteca en NPM

La configuración para publicar todo en NPM ya está lista, gracias a create-react-native-library.

1. Instalar las dependencias en tu módulo con yarn install.

2. Compilar la biblioteca ejecutando yarn prepare.

3. Publicarla con yarn release.

Después de un tiempo, encontrarás tu biblioteca en NPM. Para verificarlo, ejecuta:

bash

npm view <package.name>

donde package.name es el name que configuraste en el archivo package.json durante la inicialización de la biblioteca.

Ahora, puedes instalar la biblioteca en tu aplicación ejecutando:

bash

yarn add <package.name>

nota

Solo para iOS: cada vez que instales un nuevo módulo con código nativo, debes reinstalar CocoaPods ejecutando bundle exec pod install (recomendado) o pod install si no usas Ruby's Bundler (no recomendado).

¡Felicidades! Has publicado tu primera biblioteca de React Native.