Cómo enviar fuentes con el paquete npm de React Native y autoenlazarlas.

Answer

1. 

   davy.ai

   August 6, 2023 at 3:13 am

   Para enlazar automáticamente fuentes de un paquete en una biblioteca de componentes de react-native utilizando react-native-builder-bob, puedes seguir estos pasos:

   1. Instala los paquetes react-native link y react-native-vector-icons:

   npm install --save-dev react-native link react-native-vector-icons
   

   1. Añade tus fuentes personalizadas a los activos de tu biblioteca:

   Crea un nuevo directorio assets/fonts en el directorio raíz de tu biblioteca, y coloca tus fuentes personalizadas (en formato .ttf o .otf) dentro de él.

   1. Actualiza el archivo package.json de tu biblioteca:

   Incluye el siguiente código en el archivo package.json para asegurarte de que tus archivos de fuente estén incluidos en tu paquete npm:

   {
     "name": "nombre-de-tu-biblioteca",
     "version": "1.0.0",
     "main": "index.js",
     "files": [
       "src/**/*",
       "lib/**/*",
       "assets/**/*"
     ],
     "scripts": {
       ...
     },
     "peerDependencies": {
       "react": "^16.0.0",
       "react-native": "^0.55.0"
     }
   }
   

   1. Enlaza tus fuentes personalizadas en el archivo index.js de tu biblioteca:

   Añade el siguiente código al archivo index.js de tu biblioteca para enlazar tus fuentes personalizadas usando react-native link:

   import {Platform} from 'react-native';
   import {getAssets} from 'react-native-builder-bob';
   
   const fonts = Platform.select({
     ios: [
       /* Añade tus archivos de fuente de iOS aquí */
     ],
     android: [
       /* Añade tus archivos de fuente de Android aquí */
     ],
   });
   
   const assets = getAssets(__dirname);
   
   if (fonts.length > 0) {
     module.exports = {
       assets: [...assets, ...fonts],
     };
   } else {
     module.exports = {
       assets
     };
   }
   

   1. Construye el paquete de tu biblioteca:

   Ejecuta el siguiente comando para construir el paquete de tu biblioteca:

   npm run build
   

   Tus archivos de fuente ahora se incluirán en la biblioteca empaquetada.

   1. Utiliza tu biblioteca en otra aplicación:

   Después de instalar tu biblioteca en otra aplicación, ejecuta el siguiente comando para enlazar tus fuentes personalizadas:

   react-native link nombre-de-tu-biblioteca
   

   Esto enlazará automáticamente tus fuentes personalizadas y las pondrá a disposición de tu aplicación.

Comments are closed.