Come nascondi gli avvisi nel simulatore iOS React Native?

Ho appena aggiornato il mio React Native e ora il simulatore iOS ha una serie di avvisi. Oltre a risolverli, come nascondo questi avvisi in modo da poter vedere cosa c'è sotto?

Secondo React Native Documentation , puoi nascondere i messaggi di avviso impostando disableYellowBoxin truequesto modo:

console.disableYellowBox = true;

Un modo migliore per nascondere selettivamente determinati avvisi (che vengono visualizzati a tempo indeterminato dopo un aggiornamento all'ultima e migliore versione RN) è impostare console.ignoredYellowBox in un file JS comune nel progetto. Ad esempio, dopo aver aggiornato il mio progetto oggi a RN 0.25.1, ho visto molti ...

Avviso: ReactNative.createElement è deprecato ...

Voglio ancora essere in grado di vedere utili avvisi e messaggi di errore da React-Native, ma voglio eliminare questo particolare avviso perché proviene da una libreria npm esterna che non ha ancora incorporato le modifiche sostanziali in RN 0.25. Quindi nel mio App.js aggiungo questa riga ...

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

In questo modo ricevo ancora altri errori e avvisi utili per il mio ambiente di sviluppo, ma non vedo più quello in particolare.

Per disabilitare il posto scatola gialla

console.disableYellowBox = true; 

ovunque nella tua applicazione. In genere nel file radice, quindi verrà applicato sia a iOS che ad Android.

Per esempio

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

Nel tuo file app.js sotto il metodo del ciclo di vita di qualsiasi componente. Come in componentDidmount () devi aggiungere entrambi, escludendo qualsiasi cosa non funzionerà.

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

add this line in your app main screen.

console.disableYellowBox = true;

Aggiungi il codice seguente nel tuo file 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);

Se stai cercando di eseguire rapidamente una demo dell'app.

Se vuoi nasconderli in una build particolare perché stai facendo una demo o qualcosa del genere, puoi modificare il tuo schema Xcode per renderlo una build di rilascio e questi avvisi gialli non verranno visualizzati. Inoltre, la tua app verrà eseguita molto più velocemente.

Puoi modificare lo schema per il tuo simulatore e dispositivo reale procedendo come segue:

1. In Project in XCode.
2. Product> Scheme>Edit Scheme...
3. Cambia Build Configurationda Debuga Release.

Per coloro che vengono da questa parte provando a disabilitare gli avvisi rossi dalla console, che danno informazioni assolutamente inutili, a partire dal 17 febbraio, è possibile aggiungere questa riga di codice da qualche parte

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

Disabilita tutto console.error

console.disableYellowBox = true;

questo ha funzionato per il livello di applicazione Mettilo ovunque nel file index.js

Per disabilitare il posto scatola gialla console.disableYellowBox = true; ovunque nella tua applicazione. In genere nel file radice, quindi verrà applicato sia a iOS che ad Android.

Per ulteriori dettagli, consultare il documento ufficiale

console.disableYellowBox = true;

console.ignoredYellowBox = ["Avviso: ogni", "Avviso: non riuscito"];

Ho scoperto che anche quando ho disabilitato avvisi specifici (messaggi di casella gialla) utilizzando i metodi sopra menzionati, gli avvisi erano disabilitati sul mio dispositivo mobile, ma venivano comunque registrati sulla mia console, il che era molto fastidioso e distraeva.

Per evitare che gli avvisi vengano registrati nella tua console, puoi semplicemente sovrascrivere il warnmetodo consolesull'oggetto.

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

È anche possibile disabilitare solo avvisi specifici testando il messaggio fornito:

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

Se non puoi (o non vuoi) usare un'espressione regolare per testare la stringa, il indexOfmetodo funzionerà altrettanto bene:

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

Tieni presente che questa tecnica filtrerà tutti i messaggi che passano attraverso la warnfunzione indipendentemente da dove provengono. Per questo motivo, fai attenzione a non specificare una lista nera eccessivamente generosa che sopprimerà altri errori significativi che potrebbero provenire da un luogo diverso da React Native.

Inoltre, credo che React Native utilizzi il console.errormetodo per registrare gli errori (messaggi con riquadro rosso), quindi presumo che questa tecnica possa essere utilizzata anche per filtrare errori specifici.

Nel tuo file AppDelegate.m puoi modificare questa riga:

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

e sostituire dev=trueda dev=falsealla fine.

Correlati: sopprimere gli avvisi Xcode dalla libreria React Native

(ma non per il tuo codice)

perché: quando si inizializza una nuova app RN, il progetto Xcode contiene più di 100 avvisi che distraggono il rumore (ma probabilmente innocuo altrimenti)

soluzione: imposta inibisci tutti gli avvisi su sì in Impostazioni build per i target pertinenti.

Disabilita gli avvisi in Xcode dai framework

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

Raccomando un piccolo sviluppatore di strumenti del nostro team, raccoglie tutti gli avvisi e gli errori nell'icona fluttuante. Confronta con console.disableYellowBox = true;, puoi ancora vedere dove si trova un avviso o un errore ma non ti disturba. Repo Github WT-Console: https://github.com/WeBankFinTech/wt-console