Jak ukryć ostrzeżenia w symulatorze React Native iOS?

Właśnie zaktualizowałem moją React Native i teraz symulator iOS ma kilka ostrzeżeń. Oprócz ich naprawiania, jak mogę ukryć te ostrzeżenia, aby zobaczyć, co jest pod spodem?

Według React Native Documentation , możesz ukryć komunikaty ostrzegawcze, ustawiając disableYellowBoxw trueten sposób:

console.disableYellowBox = true;

Lepszym sposobem wybiórczego ukrycia niektórych ostrzeżeń (które pojawiają się na czas nieokreślony po aktualizacji do najnowszej i najlepszej wersji RN) jest ustawienie console.ignoredYellowBox we wspólnym pliku JS w twoim projekcie. Na przykład po dzisiejszej aktualizacji mojego projektu do RN 0.25.1 widziałem wiele ...

Ostrzeżenie: ReactNative.createElement jest przestarzały ...

Nadal chcę widzieć pomocne ostrzeżenia i komunikaty o błędach od React-Native, ale chcę zmiażdżyć to szczególne ostrzeżenie, ponieważ pochodzi z zewnętrznej biblioteki npm, która nie wprowadziła jeszcze przełomowych zmian w RN 0.25. Więc w moim App.js dodaję tę linię ...

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

W ten sposób nadal otrzymuję inne błędy i ostrzeżenia pomocne w moim środowisku deweloperskim, ale nie widzę już tego konkretnego.

Aby wyłączyć żółte pole

console.disableYellowBox = true; 

w dowolnym miejscu aplikacji. Zwykle w pliku głównym, więc będzie dotyczył zarówno iOS, jak i Androida.

Na przykład

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

W pliku app.js w ramach metody cyklu życia dowolnego komponentu. Podobnie jak w przypadku componentDidmount (), musisz dodać oba te elementy, z wyłączeniem żadnego z nich nie będzie działać.

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

add this line in your app main screen.

console.disableYellowBox = true;

Dodaj następujący kod w swoim index.js pliku

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

Jeśli próbujesz szybko demonstrować aplikację.

Jeśli chcesz ukryć je w konkretnej kompilacji, ponieważ robisz demo lub coś w tym stylu, możesz edytować swój schemat Xcode, aby był kompilacją wydania, a te żółte ostrzeżenia się nie pojawią. Ponadto Twoja aplikacja będzie działać znacznie szybciej.

Możesz edytować schemat swojego symulatora i rzeczywistego urządzenia, wykonując następujące czynności:

1. W projekcie w XCode.
2. Product> Scheme>Edit Scheme...
3. Zmień Build Configurationz Debugna Release.

Dla tych, którzy przychodzą w ten sposób, próbując wyłączyć czerwone ostrzeżenia z konsoli, które dają absolutnie bezużyteczne informacje, od lutego / 17 możesz dodać gdzieś ten wiersz kodu

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

Wyłącza wszystko console.error

console.disableYellowBox = true;

to działało na poziomie aplikacji Umieść to w dowolnym miejscu w pliku index.js

Aby wyłączyć żółte pole, umieść console.disableYellowBox = true;dowolne miejsce w aplikacji. Zwykle w pliku głównym, więc będzie dotyczył zarówno iOS, jak i Androida.

Aby uzyskać więcej informacji, zapoznaj się z oficjalnym dokumentem

console.disableYellowBox = true;

console.ignoredYellowBox = ['Ostrzeżenie: każde', 'Ostrzeżenie: niepowodzenie'];

Zauważyłem, że nawet po wyłączeniu określonych ostrzeżeń (komunikatów z żółtą ramką) za pomocą wyżej wymienionych metod, ostrzeżenia były wyłączone na moim urządzeniu mobilnym, ale nadal były rejestrowane na mojej konsoli, co było bardzo denerwujące i rozpraszające.

Aby zapobiec rejestrowaniu ostrzeżeń w konsoli, możesz po prostu nadpisać warnmetodę na consoleobiekcie.

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

Możliwe jest nawet wyłączenie tylko określonych ostrzeżeń, testując podany komunikat:

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

Jeśli nie możesz (lub nie chcesz) użyć wyrażenia regularnego do przetestowania ciągu, indexOfmetoda zadziała równie dobrze:

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

Należy pamiętać, że ta technika będzie filtrować wszystkie wiadomości przechodzące przez warnfunkcję, niezależnie od tego, skąd pochodzą. Z tego powodu uważaj, aby nie określić zbyt hojnej czarnej listy, która pomija inne znaczące błędy, które mogą pochodzić z innych źródeł niż React Native.

Uważam również, że React Native używa tej console.errormetody do rejestrowania błędów (wiadomości typu red-box), więc zakładam, że ta technika może być również użyta do odfiltrowania określonych błędów.

Polecam małe narzędzie stworzone przez nasz zespół, gromadzi wszystkie ostrzeżenia i błędy w ikonie pływaka. W porównaniu z console.disableYellowBox = true;, nadal możesz zobaczyć, gdzie jest ostrzeżenie lub błąd, ale nie przeszkadza ci to. Repo Github konsoli WT: https://github.com/WeBankFinTech/wt-console

W swoim pliku AppDelegate.m możesz zmienić ten wiersz:

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

i zastąpić dev=trueprzez dev=falsena końcu.

Powiązane: Pomiń ostrzeżenia Xcode z biblioteki React Native

(ale nie dla własnego kodu)

dlaczego: podczas inicjowania nowej aplikacji RN projekt Xcode zawiera bliżej 100 ostrzeżeń, które rozpraszają hałas (ale w przeciwnym razie prawdopodobnie nieszkodliwe)

rozwiązanie: ustaw zakaz wszystkich ostrzeżeń na tak w Ustawieniach kompilacji dla odpowiednich celów.

Wyłącz ostrzeżenia w Xcode z platform

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