Como você esconde os avisos no simulador React Native iOS?

Acabei de atualizar meu React Native e agora o simulador iOS tem um monte de avisos. Além de corrigi-los, como faço para ocultar esses avisos para que eu possa ver o que está por baixo?

De acordo com Reagir Native Documentação , você pode ocultar mensagens de aviso, definindo disableYellowBoxa trueassim:

console.disableYellowBox = true;

A melhor maneira de ocultar seletivamente certos avisos (que aparecem indefinidamente após uma atualização para a versão mais recente e melhor do RN) é definir console.ignoredYellowBox em um arquivo JS comum em seu projeto. Por exemplo, depois de atualizar meu projeto hoje para RN 0.25.1, eu estava vendo muito ...

Aviso: ReactNative.createElement está obsoleto ...

Ainda quero ver avisos úteis e mensagens de erro do React-Native, mas quero eliminar esse aviso específico porque ele vem de uma biblioteca npm externa que ainda não incorporou as alterações importantes no RN 0,25. Então, no meu App.js, adiciono esta linha ...

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

Dessa forma, ainda recebo outros erros e avisos úteis para meu ambiente de desenvolvimento, mas não vejo mais aquele em particular.

Para desativar o local da caixa amarela

console.disableYellowBox = true; 

em qualquer lugar do seu aplicativo. Normalmente no arquivo raiz, portanto, ele se aplica a iOS e Android.

Por exemplo

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

Em seu arquivo app.js sob o método de ciclo de vida de qualquer componente, como em componentDidmount (), você deve adicionar ambos, excluindo qualquer um não funcionará.

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

add this line in your app main screen.

console.disableYellowBox = true;

Adicione o seguinte código em seu arquivo 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 você está tentando demonstrar o aplicativo rapidamente .

Se você quiser ocultá-los em uma compilação específica porque está fazendo uma demonstração ou algo assim, pode editar seu esquema Xcode para torná-lo uma compilação de lançamento e esses avisos amarelos não aparecerão. Além disso, seu aplicativo será executado muito mais rápido.

Você pode editar o esquema para o seu simulador e dispositivo real, fazendo o seguinte:

1. Em Projeto no XCode.
2. Product> Scheme>Edit Scheme...
3. Mudar Build Configurationde Debugpara Release.

Para quem vem por aqui tentando desabilitar os avisos vermelhos do console, que fornecem informações absolutamente inúteis, a partir de fev / 17, você pode adicionar esta linha de código em algum lugar

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

Desabilita tudo console.error

console.disableYellowBox = true;

isso funcionou para o nível de aplicativo Coloque-o em qualquer lugar no arquivo index.js

Para desativar a caixa amarela, coloque console.disableYellowBox = true;em qualquer lugar do seu aplicativo. Normalmente no arquivo raiz, portanto, ele se aplica a iOS e Android.

Para obter mais detalhes, verifique o documento oficial

console.disableYellowBox = true;

console.ignoredYellowBox = ['Aviso: Cada', 'Aviso: Falha'];

Descobri que, mesmo quando desativei avisos específicos (mensagens de caixa amarela) usando os métodos mencionados acima, os avisos foram desativados no meu dispositivo móvel, mas ainda estavam sendo registrados no meu console, o que era muito irritante e perturbador.

Para evitar que os avisos sejam registrados em seu console, você pode simplesmente substituir o warnmétodo no consoleobjeto.

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

É ainda possível desativar apenas avisos específicos testando a mensagem fornecida:

// 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 você não puder (ou não quiser) usar uma Expressão Regular para testar a string, o indexOfmétodo funcionará tão bem:

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

Esteja ciente de que essa técnica irá filtrar todas as mensagens que passam pela warnfunção, independentemente de sua origem. Por isso, tome cuidado para não especificar uma lista negra excessivamente generosa que suprimirá outros erros significativos que podem se originar de algum lugar diferente do React Native.

Além disso, acredito que o React Native usa o console.errormétodo para registrar erros (mensagens de caixa vermelha), portanto, estou assumindo que essa técnica também pode ser usada para filtrar erros específicos.

Em seu arquivo AppDelegate.m, você pode alterar esta linha:

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

e substitua dev=truepor dev=falseno final.

Relacionado: Suprimir avisos Xcode da biblioteca React Native

(mas não para o seu próprio código)

por quê: ao inicializar um novo aplicativo RN, o projeto Xcode contém cerca de 100 avisos que distraem o ruído (mas provavelmente inofensivo de outra forma)

solução: defina inibir todos os avisos como sim em Configurações de compilação para os alvos relevantes.

Desativar avisos no Xcode de estruturas

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

Eu recomendo uma pequena ferramenta desenvolvida por nossa equipe, ela coleta todos os avisos e erros no ícone flutuante. Compare com console.disableYellowBox = true;, você ainda pode ver onde está um aviso ou erro, mas isso não o perturba. WT-Console Github Repo: https://github.com/WeBankFinTech/wt-console