Я только что обновил свой React Native, и теперь в симуляторе iOS появляется множество предупреждений. Как мне, помимо их исправления, скрыть эти предупреждения, чтобы я мог видеть, что находится под ними?

Some Guy

Ответов: 18

Ответы (18)

Лучший способ выборочно скрыть определенные предупреждения (которые появляются на неопределенный срок после обновления до последней и самой лучшей версии RN) - это установить console.ignoredYellowBox в общий файл JS в вашем проекте. Например, после обновления моего проекта до RN 0.25.1 я видел много ...

Предупреждение: ReactNative.createElement устарел ...

Я все еще хочу видеть полезные предупреждения и сообщения об ошибках от React-Native, но я хочу подавить это конкретное предупреждение, потому что оно исходит из внешней библиотеки npm, которая еще не включила критические изменения в RN 0.25. Итак, в моем App.js я добавляю эту строку ...

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

Таким образом, я все еще получаю другие ошибки и предупреждения, полезные для моей среды разработки, но я больше не вижу эту конкретную.

Если вы пытаетесь быстро Демо-версия приложения.

Если вы хотите скрыть их в конкретной сборке, потому что вы делаете демонстрацию или что-то в этом роде, вы можете отредактировать свою схему Xcode, чтобы сделать ее сборкой выпуска, и эти желтые предупреждения не будут отображаться. Кроме того, ваше приложение будет работать намного быстрее.

Вы можете отредактировать схему для вашего симулятора и реального устройства, выполнив следующие действия:

  1. В проекте в XCode.
  2. Продукт> Схема> Редактировать схему ...
  3. Изменение Конфигурация сборки с Отладка на Выпуск.

console.disableYellowBox = true;

В вашем файле app.js в любом методе жизненного цикла компонента. Как в componentDidmount () вам нужно добавить оба из них, исключение любого из них не будет работать.

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

console.disableYellowBox = true;

это сработало для уровня приложения. Поместите его где угодно в файле index.js

Для отключения желтого ящика поставьте

console.disableYellowBox = true; 

anywhere in your application. Typically in the root file so it will apply to both iOS and Android.

Например

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

Мне нравится помещать console.disableYellowBox = true в корень файла, например App. Но это когда я нахожусь на стадии разработки.

Для меня в настоящее время работают строки ниже, я использую собственный 0,64

  import { LogBox } from 'react-native';

  LogBox.ignoreLogs(['Warning: ...']); //Hide warnings

  LogBox.ignoreAllLogs();//Hide all warning notifications on front-end

При добавлении вашего предупреждения, чтобы указать, какое именно предупреждение следует подавить, вам необходимо точно добавить предупреждающее сообщение, например (случайный пример)

LogBox.ignoreLogs([
  'Warning: Failed prop type: Invalid props.style key `tintColor` supplied to `Text`.',
]);

Использование одинарных кавычек вместо обратных кавычек вокруг tintColor или Text, например, не будет работать.

Я обнаружил, что даже когда я отключил определенные предупреждения (сообщения желтого ящика) с помощью вышеупомянутых методов, предупреждения были отключены на моем мобильном устройстве, но они все еще регистрировались на моей консоли, которая было очень раздражающим и отвлекающим.

Чтобы предупреждения не записывались в консоль, вы можете просто переопределить метод warn в объекте console.

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

Можно даже отключить только определенные предупреждения, протестировав предоставленное сообщение:

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

Если вы не можете (или не хотите) использовать регулярное выражение для проверки строки, метод indexOf будет работать точно так же:

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

Имейте в виду, что этот метод будет фильтровать все сообщения, которые проходят через функцию warn, независимо от того, откуда они были отправлены. Из-за этого будьте осторожны, чтобы не указать слишком обширный черный список, который подавит другие значимые ошибки, которые могут возникать откуда-то, кроме React Native.

Кроме того, я считаю, что React Native использует метод console.error для регистрации ошибок (сообщений в красном поле), поэтому я предполагаю, что этот метод можно использовать и для фильтрации конкретных ошибок. .

console.ignoredYellowBox = ['Предупреждение: каждый', 'Предупреждение: сбой'];

Добавьте следующий код в свой 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);

Чтобы отключить желтый прямоугольник, поместите console.disableYellowBox = true; в любом месте вашего приложения. Обычно в корневом файле, поэтому он применяется как к iOS, так и к Android.

Для получения более подробной информации, пожалуйста, проверьте официальный документ

В вашем файле AppDelegate.m вы можете изменить эту строку:

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

и в конце замените dev = true на dev = false.

добавьте эту строку на главный экран вашего приложения.

console.disableYellowBox = true;

например: - в файле index.js

import { AppRegistry } from 'react-native';
import './src/utils';
import App from './App';
import { name as appName } from './app.json';

AppRegistry.registerComponent(appName, () => App);
console.disableYellowBox = true;

Для тех, кто идет этим путем, пытаясь отключить красные предупреждения с консоли, которые дают абсолютно бесполезную информацию, с 17 февраля вы можете добавить эту строку кода где-нибудь

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

Отключает все console.error

Согласно React Native Documentation, вы можете скрыть предупреждающие сообщения, установив disableYellowBox на true следующим образом:

console.disableYellowBox = true;

Обновление: React Native 0.63 +

console.disableYellowBox удален, и теперь вы можете использовать:

import { LogBox } from 'react-native';
LogBox.ignoreLogs(['Warning: ...']); // Ignore log notification by message
LogBox.ignoreAllLogs();//Ignore all log notifications

игнорировать все уведомления журнала

РН> = 0,62

import {LogBox} from 'react-native'

под импортом добавить

LogBox.ignoreLogs(['...']);

вместо '...', вы можете написать предупреждения, которые хотите скрыть. Например, У меня было предупреждение VirtualizedLists никогда не должно быть .... тогда я могу написать как

LogBox.ignoreLogs(['VirtualizedLists']);

, если вы хотите добавить еще одну ошибку, вы можете написать как

LogBox.ignoreLogs(['VirtualizedLists','Warning:...']);

Связано: подавить предупреждения Xcode из библиотеки React Native

(но не для вашего собственного кода)

почему: при инициализации нового RN-приложения проект Xcode содержит около 100 предупреждений, которые отвлекают шум (но в противном случае, вероятно, безвредны)

решение: установить запретить все предупреждения от до да под Параметры сборки для соответствующих целей.

enter image description here

Отключить предупреждения в Xcode из фреймворков

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

2022 WebDevInsider