Làm cách nào để bạn ẩn các cảnh báo trong trình mô phỏng React Native iOS?

Tôi vừa nâng cấp React Native của mình và bây giờ trình mô phỏng iOS có một loạt cảnh báo. Bên cạnh việc sửa chúng, tôi làm cách nào để ẩn những cảnh báo này để tôi có thể xem những gì bên dưới?

Theo Tài liệu gốc của React , bạn có thể ẩn các thông báo cảnh báo bằng cách đặt disableYellowBoxthành truenhư sau:

console.disableYellowBox = true;

Một cách tốt hơn để ẩn có chọn lọc các cảnh báo nhất định (hiển thị vô thời hạn sau khi nâng cấp lên phiên bản RN mới nhất và tốt nhất) là đặt console.ignoredYellowBox trong một tệp JS chung trong dự án của bạn. Ví dụ: sau khi nâng cấp dự án của tôi hôm nay lên RN 0,25,1, tôi đã thấy rất nhiều ...

Cảnh báo: ReactNative.createElement không được dùng nữa ...

Tôi vẫn muốn có thể xem các cảnh báo hữu ích và thông báo lỗi từ React-Native, nhưng tôi muốn loại bỏ cảnh báo cụ thể này vì nó đến từ thư viện npm bên ngoài chưa tích hợp các thay đổi đột phá trong RN 0,25. Vì vậy, trong App.js của tôi, tôi thêm dòng này ...

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

Bằng cách này, tôi vẫn gặp các lỗi khác và cảnh báo hữu ích cho môi trường nhà phát triển của tôi, nhưng tôi không còn thấy lỗi cụ thể đó nữa.

Để tắt vị trí hộp màu vàng

console.disableYellowBox = true; 

bất cứ nơi nào trong ứng dụng của bạn. Điển hình là trong tệp gốc vì vậy nó sẽ áp dụng cho cả iOS và Android.

Ví dụ

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

Trong tệp app.js của bạn dưới bất kỳ phương thức vòng đời của thành phần nào. Giống như trong componentDidmount (), bạn phải thêm cả hai điều này, loại trừ bất kỳ thứ nào sẽ không hoạt động.

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

add this line in your app main screen.

console.disableYellowBox = true;

Thêm đoạn mã sau vào bạn index.js tập tin

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

Nếu bạn đang cố gắng nhanh chóng demo ứng dụng.

Nếu bạn muốn ẩn chúng trong một bản dựng cụ thể vì bạn đang làm bản demo hoặc một cái gì đó, bạn có thể chỉnh sửa lược đồ Xcode của mình để biến nó thành bản dựng phát hành và những cảnh báo màu vàng này sẽ không hiển thị. Ngoài ra, ứng dụng của bạn sẽ chạy nhanh hơn nhiều.

Bạn có thể chỉnh sửa Lược đồ cho trình mô phỏng và thiết bị thực của mình bằng cách làm như sau:

1. Trong dự án trong XCode.
2. Product> Scheme>Edit Scheme...
3. Thay đổi Build Configurationtừ Debugsang Release.

Đối với những người đến theo cách này đang cố gắng vô hiệu hóa cảnh báo màu đỏ từ bảng điều khiển, cung cấp thông tin hoàn toàn vô ích, kể từ feb / 17, bạn có thể thêm dòng mã này vào đâu đó

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

Tắt tất cả console.error

console.disableYellowBox = true;

điều này hoạt động cho cấp ứng dụng Đặt nó ở bất kỳ đâu trong tệp index.js

Để tắt hộp màu vàng, hãy đặt console.disableYellowBox = true;bất kỳ vị trí nào trong ứng dụng của bạn. Điển hình là trong tệp gốc vì vậy nó sẽ áp dụng cho cả iOS và Android.

Để biết thêm chi tiết, vui lòng kiểm tra tài liệu chính thức

console.disableYellowBox = true;

console.ignoredYellowBox = ['Cảnh báo: Từng', 'Cảnh báo: Không thành công'];

Tôi thấy rằng ngay cả khi tôi tắt các cảnh báo cụ thể (thông báo hộp màu vàng) bằng các phương pháp được đề cập ở trên, các cảnh báo đã bị tắt trên thiết bị di động của tôi, nhưng chúng vẫn được ghi vào bảng điều khiển của tôi, điều này rất khó chịu và mất tập trung.

Để ngăn cảnh báo được ghi vào bảng điều khiển của bạn, bạn có thể chỉ cần ghi đè warnphương thức lên consoleđối tượng.

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

Thậm chí chỉ có thể tắt các cảnh báo cụ thể bằng cách kiểm tra thông báo được cung cấp:

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

Nếu bạn không thể (hoặc không muốn) sử dụng Biểu thức chính quy để kiểm tra chuỗi, indexOfphương pháp cũng sẽ hoạt động như sau:

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

Lưu ý rằng kỹ thuật này sẽ lọc tất cả các thông báo đi qua warnhàm bất kể chúng bắt nguồn từ đâu. Do đó, hãy cẩn thận rằng bạn không chỉ định một danh sách đen quá hào phóng sẽ loại bỏ các lỗi có ý nghĩa khác có thể bắt nguồn từ một nơi nào đó không phải React Native.

Ngoài ra, tôi tin rằng React Native sử dụng console.errorphương pháp ghi lại lỗi (thông báo hộp đỏ), vì vậy tôi giả định rằng kỹ thuật này cũng có thể được sử dụng để lọc ra các lỗi cụ thể.

Trong tệp AppDelegate.m của bạn, bạn có thể thay đổi dòng này:

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

và thay thế dev=truebằng dev=falseở cuối.

Liên quan: Loại bỏ cảnh báo Xcode từ thư viện React Native

(nhưng không phải cho mã của riêng bạn)

tại sao: khi khởi chạy một ứng dụng RN mới, dự án Xcode chứa gần 100 cảnh báo gây mất tập trung (nhưng có thể là vô hại nếu không)

giải pháp: đặt ngăn chặn tất cả các cảnh báo thành có trong Cài đặt xây dựng cho các mục tiêu liên quan.

Tắt cảnh báo trong Xcode từ các khuôn khổ

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

Tôi đề xuất một nhà phát triển công cụ nhỏ của nhóm chúng tôi, Nó thu thập tất cả các cảnh báo và lỗi vào biểu tượng phao. So sánh với console.disableYellowBox = true;, bạn vẫn có thể thấy đâu là cảnh báo hoặc lỗi nhưng nó không làm phiền bạn. WT-Console Github Repo: https://github.com/WeBankFinTech/wt-console