Wie können Sie die Warnungen im React Native iOS-Simulator ausblenden?

Ich habe gerade mein React Native aktualisiert und jetzt enthält der iOS-Simulator eine Reihe von Warnungen. Wie verstecke ich diese Warnungen, um zu sehen, was sich darunter befindet?

Nach Heimisch in React Dokumentation , können Sie Warnmeldungen verstecken , indem Sie disableYellowBoxzu truewie folgt aus :

console.disableYellowBox = true;

Eine bessere Möglichkeit, bestimmte Warnungen (die nach einem Upgrade auf die neueste und beste RN-Version auf unbestimmte Zeit angezeigt werden ) selektiv auszublenden, besteht darin, console.ignoredYellowBox in einer gemeinsamen JS-Datei in Ihrem Projekt festzulegen . Nachdem ich heute mein Projekt auf RN 0.25.1 aktualisiert hatte, sah ich viele ...

Warnung: ReactNative.createElement ist veraltet ...

Ich möchte weiterhin hilfreiche Warnungen und Fehlermeldungen von React-Native sehen können, aber ich möchte diese spezielle Warnung unterdrücken, da sie aus einer externen npm-Bibliothek stammt, die die aktuellen Änderungen in RN 0.25 noch nicht berücksichtigt hat. Also füge ich in meiner App.js diese Zeile hinzu ...

// 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'];

Auf diese Weise erhalte ich immer noch andere Fehler und Warnungen, die für meine Entwicklungsumgebung hilfreich sind, aber ich sehe diese nicht mehr.

So deaktivieren Sie die gelbe Box

console.disableYellowBox = true; 

überall in Ihrer Anwendung. In der Regel in der Stammdatei, sodass sie sowohl für iOS als auch für Android gilt.

Beispielsweise

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

In Ihrer app.js-Datei unter der Lebenszyklusmethode einer Komponente müssen Sie wie in componentDidmount () beide hinzufügen, außer dass alle nicht funktionieren.

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

add this line in your app main screen.

console.disableYellowBox = true;

Fügen Sie den folgenden Code in Ihre Datei index.js ein

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

Wenn Sie versuchen, die App schnell zu testen.

Wenn Sie sie in einem bestimmten Build ausblenden möchten, weil Sie eine Demo oder etwas anderes ausführen, können Sie Ihr Xcode-Schema so bearbeiten, dass es zu einem Release-Build wird. Diese gelben Warnungen werden nicht angezeigt. Außerdem läuft Ihre App viel schneller.

Sie können das Schema für Ihren Simulator und Ihr reales Gerät wie folgt bearbeiten:

1. In Projekt in XCode.
2. Product> Scheme>Edit Scheme...
3. Wechseln Sie Build Configurationvon Debugzu Release.

Für diejenigen, die auf diese Weise versuchen, rote Warnungen von der Konsole zu deaktivieren, die ab dem 17. Februar absolut nutzlose Informationen liefern, können Sie diese Codezeile irgendwo hinzufügen

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

Deaktiviert alle console.error

console.disableYellowBox = true;

Dies funktionierte auf Anwendungsebene. Platzieren Sie es an einer beliebigen Stelle in der Datei index.js

Um das gelbe Feld zu deaktivieren, platzieren Sie es an einer console.disableYellowBox = true;beliebigen Stelle in Ihrer Anwendung. In der Regel in der Root-Datei, so dass es sowohl für iOS als auch für Android gilt.

Weitere Informationen finden Sie im offiziellen Dokument

console.disableYellowBox = true;

console.ignoredYellowBox = ['Warnung: Jeder', 'Warnung: Fehlgeschlagen'];

Ich stellte fest, dass selbst wenn ich bestimmte Warnungen (Yellow-Box-Nachrichten) mit den oben genannten Methoden deaktiviert habe , die Warnungen auf meinem Mobilgerät deaktiviert waren , aber immer noch auf meiner Konsole protokolliert wurden, was sehr ärgerlich und ablenkend war.

Um zu verhindern, dass Warnungen an Ihrer Konsole protokolliert werden, können Sie die warnMethode für das consoleObjekt einfach überschreiben .

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

Es ist sogar möglich, nur bestimmte Warnungen zu deaktivieren, indem Sie die bereitgestellte Meldung testen:

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

Wenn Sie zum Testen der Zeichenfolge keinen regulären Ausdruck verwenden können (oder möchten), indexOffunktioniert die Methode genauso gut:

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

Beachten Sie, dass diese Technik alle Nachrichten filtert , die die warnFunktion durchlaufen , unabhängig davon, woher sie stammen. Achten Sie daher darauf, dass Sie keine übermäßig großzügige schwarze Liste angeben, die andere bedeutsame Fehler unterdrückt, die möglicherweise von einem anderen Ort als React Native stammen.

Ich glaube auch, dass React Native die console.errorMethode zum Protokollieren von Fehlern (Red-Box-Nachrichten) verwendet. Daher gehe ich davon aus, dass diese Technik auch zum Herausfiltern bestimmter Fehler verwendet werden kann.

In Ihrer AppDelegate.m- Datei können Sie diese Zeile ändern:

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

und am Ende dev=truedurch ersetzen dev=false.

Verwandte: Unterdrücken Sie Xcode-Warnungen aus der React Native-Bibliothek

(aber nicht für Ihren eigenen Code)

Warum: Bei der Initialisierung einer neuen RN-App enthält das Xcode-Projekt näher an 100 Warnungen, die das Rauschen ablenken (ansonsten aber wahrscheinlich harmlos).

Lösung: Setzen Sie unter Build-Einstellungen für die relevanten Ziele alle Warnungen auf Ja sperren .

Deaktivieren Sie Warnungen in Xcode in Frameworks

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

Ich empfehle einen kleinen Tool-Entwickler von unserem Team. Er sammelt alle Warnungen und Fehler im Float-Symbol. Im Vergleich dazu console.disableYellowBox = true;können Sie immer noch sehen, wo eine Warnung oder ein Fehler liegt, aber es stört Sie nicht. WT-Console Github Repo: https://github.com/WeBankFinTech/wt-console