¿Cómo se ocultan las advertencias en el simulador React Native iOS?

106

Acabo de actualizar mi React Native y ahora el simulador de iOS tiene un montón de advertencias. Además de corregirlos, ¿cómo oculto estas advertencias para poder ver lo que hay debajo?

Algún chico
fuente

Respuestas:

208

De acuerdo con Reaccionar nativo de documentación , puede ocultar los mensajes de alerta mediante el establecimiento disableYellowBoxde truela siguiente manera:

console.disableYellowBox = true;
Moussawi7
fuente
3
esto funcionó para mí, pero no las otras respuestas que decían console.ignoredYellowBox = [...];
sdfsdf
6
¡Gracias! Esta debería ser la respuesta seleccionada.
Sreejith Ramakrishnan
1
Lo siento, pero ¿dónde agrega console.disableYellowBox = true?
Michel Arteta
2
@ Mike, en cualquier lugar de su script, cuando desee deshabilitar el cuadro amarillo.
Moussawi7
2
Un buen lugar para colocarlo es en el constructor del componente RootContainer.
Fernando Vieira
102

Una mejor manera de ocultar selectivamente ciertas advertencias (que aparecen indefinidamente después de una actualización a la última y mejor versión de RN) es configurar console.ignoredYellowBox en un archivo JS común en tu proyecto. Por ejemplo, después de actualizar mi proyecto hoy a RN 0.25.1, estaba viendo muchos ...

Advertencia: ReactNative.createElement está obsoleto ...

Todavía quiero poder ver advertencias útiles y mensajes de error de React-Native, pero quiero aplastar esta advertencia en particular porque proviene de una biblioteca npm externa que aún no ha incorporado los cambios importantes en RN 0.25. Entonces en mi App.js agrego esta línea ...

// RN >= 0.63
import { LogBox } from 'react-native';

LogBox.ignoreLogs(['Warning: ...']);

// RN >= 0.52
import {YellowBox} from 'react-native';

YellowBox.ignoreWarnings(['Warning: ReactNative.createElement']);

// RN < 0.52
console.ignoredYellowBox = ['Warning: ReactNative.createElement'];

De esta manera, todavía recibo otros errores y advertencias útiles para mi entorno de desarrollo, pero ya no veo ese en particular.

Sureño
fuente
Solución perfecta para mí, aunque tuve la misma advertencia "ReactNative.createElement está en desuso".
JD Angerhofer
2
¿Qué porcentaje del mensaje de error debería escribir para ignorarlo?
Soorena
Esta respuesta necesita una actualización. YelloBox ya no forma parte de react-native.
Haidar Zeineddine
17

Para deshabilitar el lugar del cuadro amarillo

console.disableYellowBox = true; 

en cualquier lugar de su aplicación. Normalmente en el archivo raíz, por lo que se aplicará tanto a iOS como a Android.

Por ejemplo

export default class App extends React.Component {
     render() {
          console.disableYellowBox = true;
          return (<View></View>);
     }
}
Ragulan
fuente
11

En su archivo app.js bajo el método de ciclo de vida de cualquier componente, como en componentDidmount (), debe agregar ambos, excluyendo cualquiera no funcionará.

console.ignoredYellowBox = ['Warning: Each', 'Warning: Failed'];
console.disableYellowBox = true;
Abdul Basit
fuente
Eso no es cierto, algo está sucediendo en su proyecto. Una línea dice "ignore esta lista de advertencias" (que es la forma más precisa de hacerlo), una línea dice "ignore todas las advertencias" (que es una forma muy directa de hacerlo). Solo tengo la primera línea, por ejemplo, y suprime perfectamente mis advertencias.
Mike Hardy
10

add this line in your app main screen.

console.disableYellowBox = true;

SaGaR Patel
fuente
9

Agregue el siguiente código en su archivo index.js

console.disableYellowBox = true;

    import {AppRegistry} from 'react-native';
    import App from './App';
    import {name as appName} from './app.json';

    console.disableYellowBox = true;



AppRegistry.registerComponent(appName, () => App);
Sarthak Mishra
fuente
7

Si está intentando hacer una demostración rápida de la aplicación.

Si desea ocultarlos en una compilación en particular porque está haciendo una demostración o algo así, puede editar su esquema de Xcode para convertirlo en una compilación de lanzamiento y estas advertencias amarillas no aparecerán. Además, su aplicación se ejecutará mucho más rápido.

Puede editar el esquema para su simulador y dispositivo real haciendo lo siguiente:

  1. En Proyecto en XCode.
  2. Product> Scheme>Edit Scheme...
  3. Cambiar Build Configurationde Debuga Release.
Joshua Pinter
fuente
1
Debería ser la respuesta aceptada. En Release: ¡sin advertencia y una aplicación más rápida!
cappie013
2
No obtiene ninguna función de depuración enRelease
Phil Andrews
1
@PhilAndrews ¡Estoy de acuerdo! No sé que publiqué de esta manera cuando, pero hay suficientes personas que lo encuentran útil y lo dejaré. Debo haber estado intentando mostrarle la aplicación a alguien y quería deshacerme de las advertencias amarillas, en cuyo caso, este es el camino correcto a seguir.
Joshua Pinter
5

Para aquellos que vienen por aquí tratando de deshabilitar las advertencias rojas de la consola, que brindan información absolutamente inútil, a partir del 17 de febrero, pueden agregar esta línea de código en algún lugar.

console.error = (error) => error.apply;

Deshabilita todo console.error

octoedro
fuente
1
¡Gracias! Ni siquiera me di cuenta de que el error de mi consola era la razón por la que aparecía la pantalla roja. Pensé que algo andaba mal con try / catch no funciona: o.
Nick
5

console.disableYellowBox = true;

esto funcionó para el nivel de aplicación Colóquelo en cualquier lugar del archivo index.js

James Siva
fuente
4

Para desactivar el cuadro amarillo, colóquelo console.disableYellowBox = true;en cualquier lugar de su aplicación. Normalmente en el archivo raíz, por lo que se aplicará tanto a iOS como a Android.

Para obtener más detalles, consulte el documento oficial.

Vivek
fuente
4

console.disableYellowBox = true;

kallayya Hiremath
fuente
1

console.ignoredYellowBox = ['Advertencia: cada uno', 'Advertencia: Falló'];

Shivo'ham 0
fuente
1

Descubrí que incluso cuando desactivé advertencias específicas (mensajes de recuadro amarillo) usando los métodos mencionados anteriormente, las advertencias se desactivaron en mi dispositivo móvil, pero aún se estaban registrando en mi consola, lo cual era muy molesto y distractor.

Para evitar que las advertencias se registren en su consola, simplemente puede anular el warnmétodo en el consoleobjeto.

// This will prevent all warnings from being logged
console.warn = () => {};

Incluso es posible deshabilitar solo advertencias específicas probando el mensaje proporcionado:

// Hold a reference to the original function so that it can be called later
const originalWarn = console.warn;

console.warn = (message, ...optionalParams) => {
  // Insure that we don't try to perform any string-only operations on
  // a non-string type:
  if (typeof message === 'string') {
    // Check if the message contains the blacklisted substring
    if (/Your blacklisted substring goes here/g.test(message))
    {
      // Don't log the value
      return;
    }
  }

  // Otherwise delegate to the original 'console.warn' function
  originalWarn(message, ...optionalParams);
};

Si no puede (o no quiere) usar una expresión regular para probar la cadena, el indexOfmétodo funcionará igual de bien:

// An index of -1 will be returned if the blacklisted substring was NOT found
if (message.indexOf('Your blacklisted substring goes here') > -1) {
  // Don't log the message
  return;
}

Tenga en cuenta que esta técnica filtrará todos los mensajes que pasen por la warnfunción independientemente de su origen. Debido a esto, tenga cuidado de no especificar una lista negra demasiado generosa que suprima otros errores significativos que pueden originarse en algún lugar que no sea React Native.

Además, creo que React Native usa el console.errormétodo para registrar errores (mensajes de recuadro rojo), por lo que supongo que esta técnica también podría usarse para filtrar errores específicos.

Fearnbuster
fuente
0

En su archivo AppDelegate.m puede cambiar esta línea:

jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios&dev=true"];

y reemplazar dev=truepor dev=falseal final.

G. Hamaide
fuente
0

Relacionado: Suprima las advertencias de Xcode de la biblioteca React Native

(pero no para su propio código)

por qué: al inicializar una nueva aplicación RN, el proyecto Xcode contiene más de 100 advertencias que distraen el ruido (pero probablemente inofensivo de lo contrario)

solución: establezca inhibir todas las advertencias en en Configuración de compilación para los objetivos relevantes.

ingrese la descripción de la imagen aquí

Deshabilitar las advertencias en Xcode de los marcos

https://github.com/facebook/react-native/issues/11736

Leonard Pauli
fuente
además; por errores lógicos; ver "-Xanalyzer -analyzer-disable-all-checks"
Leonard Pauli
La pregunta original era sobre la advertencia en la aplicación (es decir, el cuadro amarillo), encontré esta pregunta al intentar limpiar las advertencias del proyecto Xcode. ¿Por qué votar en contra? ver meta.stackoverflow.com/questions/299352/…
Leonard Pauli
0

Recomiendo un pequeño desarrollador de herramientas de nuestro equipo, que recopila todas las advertencias y errores en el icono flotante. En comparación con console.disableYellowBox = true;, aún puede ver dónde hay una advertencia o un error, pero no le molesta. ingrese la descripción de la imagen aquí WT-Console Github Repo: https://github.com/WeBankFinTech/wt-console

EricHua23
fuente