Comment masquer les avertissements dans le simulateur React Native iOS?

Je viens de mettre à niveau mon React Native et maintenant le simulateur iOS a un tas d'avertissements. En plus de les réparer, comment puis-je masquer ces avertissements afin de voir ce qu'il y a en dessous?

Selon React natif Documentation , vous pouvez masquer les messages d'avertissement en mettant disableYellowBoxà la truemanière suivante:

console.disableYellowBox = true;

Une meilleure façon de masquer sélectivement certains avertissements (qui s'affichent indéfiniment après une mise à niveau vers la dernière et la meilleure version RN) consiste à définir console.ignoredYellowBox dans un fichier JS commun dans votre projet. Par exemple, après avoir amélioré mon projet aujourd'hui à RN 0.25.1, je voyais beaucoup de ...

Avertissement: ReactNative.createElement est obsolète ...

Je veux toujours pouvoir voir les avertissements et les messages d'erreur utiles de React-Native, mais je veux écraser cet avertissement particulier car il provient d'une bibliothèque npm externe qui n'a pas encore incorporé les changements de rupture dans RN 0.25. Donc dans mon App.js j'ajoute cette ligne ...

// 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 cette façon, j'obtiens toujours d'autres erreurs et avertissements utiles pour mon environnement de développement, mais je ne vois plus celui-là.

Pour désactiver la case jaune

console.disableYellowBox = true; 

n'importe où dans votre application. Généralement dans le fichier racine, il s'appliquera donc à iOS et Android.

Par exemple

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

Dans votre fichier app.js sous la méthode du cycle de vie de n'importe quel composant, comme dans componentDidmount (), vous devez ajouter les deux, à l'exclusion de tout ne fonctionnera pas.

console.ignoredYellowBox = ['Warning: Each', 'Warning: Failed'];
console.disableYellowBox = true;

add this line in your app main screen.

console.disableYellowBox = true;

Ajoutez le code suivant dans votre fichier 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 vous essayez de faire une démonstration rapide de l'application.

Si vous souhaitez les masquer dans une version particulière parce que vous faites une démo ou quelque chose du genre, vous pouvez modifier votre schéma Xcode pour en faire une version de version et ces avertissements jaunes ne s'afficheront pas. De plus, votre application fonctionnera beaucoup plus rapidement.

Vous pouvez modifier le schéma de votre simulateur et de votre appareil réel en procédant comme suit:

1. Dans Project dans XCode.
2. Product> Scheme>Edit Scheme...
3. Changer Build Configurationde Debugà Release.

Pour ceux qui viennent de cette façon essayant de désactiver les avertissements rouges de la console, qui donnent des informations absolument inutiles, à partir du 17 février, vous pouvez ajouter cette ligne de code quelque part

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

Désactive tout console.error

console.disableYellowBox = true;

cela a fonctionné pour le niveau de l'application Mettez-le n'importe où dans le fichier index.js

Pour désactiver la boîte jaune, placez-le console.disableYellowBox = true;n'importe où dans votre application. Généralement dans le fichier racine, il s'appliquera donc à iOS et Android.

Pour obtenir plus de détails, veuillez consulter le document officiel

console.disableYellowBox = true;

console.ignoredYellowBox = ['Warning: Each', 'Warning: Failed'];

J'ai constaté que même lorsque je désactivais des avertissements spécifiques (messages de boîte jaune) en utilisant les méthodes mentionnées ci-dessus, les avertissements étaient désactivés sur mon appareil mobile, mais ils étaient toujours enregistrés sur ma console, ce qui était très ennuyeux et distrayant.

Pour éviter que les avertissements ne soient consignés sur votre console, vous pouvez simplement remplacer la warnméthode sur l' consoleobjet.

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

Il est même possible de désactiver uniquement des avertissements spécifiques en testant le message fourni:

// 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 vous ne pouvez pas (ou ne voulez pas) utiliser une expression régulière pour tester la chaîne, la indexOfméthode fonctionnera tout aussi 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;
}

Sachez que cette technique filtrera tous les messages qui passent par la warnfonction indépendamment de leur origine. Pour cette raison, veillez à ne pas spécifier une liste noire trop généreuse qui supprimera d'autres erreurs significatives pouvant provenir d'un endroit autre que React Native.

De plus, je pense que React Native utilise la console.errorméthode pour consigner les erreurs (messages de boîte rouge), donc je suppose que cette technique pourrait également être utilisée pour filtrer des erreurs spécifiques.

Dans votre fichier AppDelegate.m , vous pouvez modifier cette ligne:

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

et remplacez dev=truepar dev=falseà la fin.

Connexes: supprimer les avertissements Xcode de la bibliothèque React Native

(mais pas pour votre propre code)

pourquoi: lors de l'initialisation d'une nouvelle application RN, le projet Xcode contient plus de 100 avertissements qui gênent le bruit (mais probablement inoffensifs sinon)

solution: définissez inhiber tous les avertissements sur yes sous Build Settings pour les cibles concernées.

Désactiver les avertissements dans Xcode à partir des frameworks

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

Je recommande un petit développement d'outils par notre équipe, il collecte tous les avertissements et erreurs dans l'icône du flotteur. Comparé à console.disableYellowBox = true;, vous pouvez toujours voir où se trouve un avertissement ou une erreur, mais cela ne vous dérange pas. Repo Github WT-Console: https://github.com/WeBankFinTech/wt-console