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

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?

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

console.disableYellowBox = true;

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.

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>);
     }
}

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;

add this line in your app main screen.

console.disableYellowBox = true;

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);

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.

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

console.disableYellowBox = true;

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

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.

console.disableYellowBox = true;

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

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.

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.

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 sí en Configuración de compilación para los objetivos relevantes.

Deshabilitar las advertencias en Xcode de los marcos

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

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. WT-Console Github Repo: https://github.com/WeBankFinTech/wt-console