Saltar al contenido principal

Resolución de problemas

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 →

Estos son algunos problemas comunes que puedes encontrar al configurar React Native. Si encuentras algo que no esté listado aquí, prueba buscando el problema en GitHub.

Puerto ya en uso​

El empaquetador Metro se ejecuta en el puerto 8081. Si otro proceso ya está usando ese puerto, puedes terminar ese proceso o cambiar el puerto que usa el empaquetador.

Terminar un proceso en el puerto 8081​

Ejecuta el siguiente comando para encontrar el ID del proceso que está escuchando en el puerto 8081:

shell
sudo lsof -i :8081

Luego ejecuta lo siguiente para terminar el proceso:

shell
kill -9 <PID>

En Windows puedes encontrar el proceso que usa el puerto 8081 con el Monitor de recursos y detenerlo usando el Administrador de tareas.

Usar un puerto diferente a 8081​

Puedes configurar el empaquetador para usar un puerto diferente a 8081 mediante el parámetro port. Desde la raíz de tu proyecto ejecuta:

shell
npm start -- --port=8088

También necesitarás actualizar tus aplicaciones para cargar el bundle de JavaScript desde el nuevo puerto. Si ejecutas en dispositivo desde Xcode, puedes hacer esto actualizando las ocurrencias de 8081 a tu puerto elegido en el archivo ios/__App_Name__.xcodeproj/project.pbxproj.

Error de bloqueo de NPM​

Si encuentras un error como npm WARN locking Error: EACCES mientras usas la CLI de React Native, intenta ejecutar lo siguiente:

shell
sudo chown -R $USER ~/.npm
sudo chown -R $USER /usr/local/lib/node_modules

Bibliotecas faltantes para React​

Si agregaste React Native manualmente a tu proyecto, asegúrate de haber incluido todas las dependencias relevantes que estás usando, como RCTText.xcodeproj, RCTImage.xcodeproj. Luego, los binarios construidos por estas dependencias deben vincularse a tu binario de aplicación. Usa la sección Linked Frameworks and Binaries en la configuración del proyecto de Xcode. Pasos más detallados aquí: Vinculación de bibliotecas.

Si usas CocoaPods, verifica que hayas agregado React junto con los subspecs al Podfile. Por ejemplo, si estabas usando las APIs <Text />, <Image /> y fetch(), necesitarías agregar esto en tu Podfile:

pod 'React', :path => '../node_modules/react-native', :subspecs => [
  'RCTText',
  'RCTImage',
  'RCTNetwork',
  'RCTWebSocket',
]

Luego, asegúrate de haber ejecutado pod install y que se haya creado un directorio Pods/ en tu proyecto con React instalado. CocoaPods te indicará que uses el archivo .xcworkspace generado de ahora en adelante para poder usar estas dependencias instaladas.

React Native no se compila cuando se usa como CocoaPod​

Existe un plugin de CocoaPods llamado cocoapods-fix-react-native que maneja cualquier corrección potencial del código fuente debido a diferencias al usar un administrador de dependencias.

Lista de argumentos demasiado larga: expansión recursiva de encabezados falló​

En la configuración de compilación del proyecto, User Search Header Paths y Header Search Paths son dos configuraciones que especifican dónde debe buscar Xcode los archivos de encabezado #import especificados en el código. Para Pods, CocoaPods usa un arreglo predeterminado de carpetas específicas para buscar. Verifica que esta configuración particular no esté sobrescrita y que ninguna de las carpetas configuradas sea demasiado grande. Si una de las carpetas es muy grande, Xcode intentará buscar recursivamente en todo el directorio y arrojará el error mencionado en algún punto.

Para revertir las configuraciones de compilación User Search Header Paths y Header Search Paths a sus valores predeterminados establecidos por CocoaPods: selecciona la entrada en el panel Build Settings y presiona eliminar. Esto eliminará la anulación personalizada y volverá a los valores predeterminados de CocoaPod.

No hay transportes disponibles​

React Native implementa un polyfill para WebSockets. Estos polyfills se inicializan como parte del módulo react-native que incluyes en tu aplicación mediante import React from 'react'. Si cargas otro módulo que requiera WebSockets, como Firebase, asegúrate de cargarlo/requerirlo después de react-native:

import React from 'react';
import Firebase from 'firebase';

Excepción de comando de shell no respondiente​

Si encuentras una excepción ShellCommandUnresponsiveException como:

Execution failed for task ':app:installDebug'.
  com.android.builder.testing.api.DeviceException: com.android.ddmlib.ShellCommandUnresponsiveException

Reinicia el servidor ADB ejecutando los siguientes comandos en tu terminal:

adb kill-server
adb start-server

No se puede iniciar el gestor de paquetes de react-native (en Linux)​

Caso 1: Error "code":"ENOSPC","errno":"ENOSPC"​

Problema causado por exceder el número de directorios que inotify (utilizado por watchman en Linux) puede monitorear. Para resolverlo, ejecuta este comando en tu terminal:

shell
echo fs.inotify.max_user_watches=582222 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p

Error: spawnSync ./gradlew EACCES​

Si encuentras problemas donde ejecutar npm run android o yarn android en macOS arroja el error anterior, intenta ejecutar sudo chmod +x android/gradlew para convertir los archivos gradlew en ejecutables.