你如何在React Native iOS模拟器中隐藏警告？

Question

我刚刚升级了我的React Native,现在iOS模拟器有一堆警告.除了修复它们之外,我如何隐藏这些警告以便我可以看到下面的内容？

Answer 1

根据React Native Documentation,您可以通过设置disableYellowBox为true这样来隐藏警告消息:

console.disableYellowBox = true;

Answer 2

有选择地隐藏某些警告(在升级到最新且最好的RN版本后无限期显示)的更好方法是在项目的公共JS文件中设置console.ignoredYellowBox.例如,在今天将我的项目升级到RN 0.25.1后,我看到很多......

警告:不推荐使用ReactNative.createElement ...

我仍然希望能够看到来自React-Native的有用警告和错误消息,但我想压缩这个特殊的警告,因为它来自一个尚未纳入RN 0.25中的重大变化的外部npm库.所以在我的App.js中我添加了这一行......

// RN >= 0.52
import {YellowBox} from 'react-native';
YellowBox.ignoreWarnings(['Warning: ReactNative.createElement']);

// RN < 0.52
console.ignoredYellowBox = ['Warning: ReactNative.createElement'];

这样我仍然会得到其他错误和警告对我的开发环境有用,但我不再看到那个特定的错误.

Answer 3

对我来说，下面的行目前有效，我正在使用 React Native 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`.',
]);

例如，使用单引号代替tintColoror周围的反引号是行不通的。Text

Answer 4

add this line in your app main screen.

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;

Answer 5

禁用黄框位置

console.disableYellowBox = true; 

您应用程序中的任何位置。通常在根文件中，因此它将同时适用于iOS和Android。

例如

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

Answer 6

如果您想快速演示应用程序。

如果您想在特定构建中隐藏它们，因为您正在做演示或其他事情，您可以编辑您的 Xcode 方案以使其成为发布构建，并且这些黄色警告不会显示。此外，您的应用程序将运行得更快。

您可以通过执行以下操作来编辑模拟器和真实设备的方案：

1. 在 XCode 的项目中。
2. Product> Scheme>Edit Scheme...
3. Build Configuration从更改Debug为Release。

Answer 7

RN >= 0.62

import {LogBox} from 'react-native'

在导入下添加

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

您可以编写要隐藏的警告，而不是“...”。例如，我收到警告 VirtualizedLists 永远不应该......然后我可以写为

LogBox.ignoreLogs(['VirtualizedLists']);

如果你想添加另一个错误，你可以写成

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

Answer 8

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

Answer 9

对于那些试图通过控制台禁用红色警告的人，这些警告会提供绝对无用的信息，从2月17日开始，您可以在以下位置添加此行代码

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

全部禁用 console.error

Answer 10

console.disableYellowBox = true;

这适用于应用程序级别 将它放在 index.js 文件中的任何位置

Answer 11

在任何组件的生命周期方法下的app.js文件中，例如componentDidmount（）中，您都必须添加这两者，但任何一项都将不起作用。

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

Answer 12

我发现即使我使用上述方法禁用了特定警告（黄框消息），这些警告在我的移动设备上也被禁用了，但它们仍然被记录到我的控制台中，这非常烦人和分散注意力。

为了防止警告被记录到您的控制台，您可以简单地覆盖对象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方法来记录错误（红框消息），所以我假设这种技术也可用于过滤掉特定的错误。

Answer 13

在app.js中添加

从 React Native 导入 LogBox

从'react-native'导入{LogBox}；

进而..

LogBox.ignoreAllLogs()