คุณซ่อนคำเตือนใน React Native iOS Simulator ได้อย่างไร

ฉันเพิ่งอัปเกรด React Native ของฉันและตอนนี้โปรแกรมจำลอง iOS มีคำเตือนมากมาย นอกจากการแก้ไขแล้วฉันจะซ่อนคำเตือนเหล่านี้ได้อย่างไรเพื่อให้ฉันเห็นว่ามีอะไรอยู่ข้างใต้

ตาม React Native Documentationคุณสามารถซ่อนข้อความเตือนได้โดยตั้งค่าdisableYellowBoxเป็นtrueดังนี้:

console.disableYellowBox = true;

อัปเดต

~~ console.disableYellowBox ~~ ถูกลบออกและตอนนี้คุณสามารถใช้:

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

เพื่อละเว้นการแจ้งเตือนบันทึกทั้งหมด

วิธีที่ดีกว่าในการเลือกซ่อนคำเตือนบางอย่าง (ซึ่งจะแสดงขึ้นเรื่อย ๆ หลังจากอัปเกรดเป็นเวอร์ชัน 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'];

ด้วยวิธีนี้ฉันยังคงได้รับข้อผิดพลาดอื่น ๆ และคำเตือนที่เป็นประโยชน์สำหรับสภาพแวดล้อมการพัฒนาของฉัน แต่ฉันไม่เห็นข้อผิดพลาดนั้นอีกต่อไป

เพื่อปิดการใช้งานกล่องสีเหลือง

console.disableYellowBox = true; 

ที่ใดก็ได้ในแอปพลิเคชันของคุณ โดยปกติจะอยู่ในไฟล์รูทดังนั้นมันจะใช้กับทั้ง iOS และ Android

ตัวอย่างเช่น

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

add this line in your app main screen.

console.disableYellowBox = จริง;

ตัวอย่างเช่น: - ในไฟล์ 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;

ในไฟล์ app.js ของคุณภายใต้วิธีวงจรชีวิตของคอมโพเนนต์ใด ๆ เช่นเดียวกับใน componentDidmount () คุณต้องเพิ่มทั้งสองอย่างนี้ยกเว้นสิ่งใด ๆ จะไม่ทำงาน

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

เพิ่มรหัสต่อไปนี้ในไฟล์index.jsของคุณ

console.disableYellowBox = จริง;

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

    console.disableYellowBox = true;



AppRegistry.registerComponent(appName, () => App);

หากคุณกำลังพยายามสาธิตแอปอย่างรวดเร็ว

หากคุณต้องการซ่อนไว้ในบิลด์เฉพาะเนื่องจากคุณกำลังทำการสาธิตหรืออะไรบางอย่างคุณสามารถแก้ไขชุดรูปแบบ Xcode ของคุณเพื่อทำให้เป็นรุ่นและคำเตือนสีเหลืองเหล่านี้จะไม่ปรากฏขึ้น นอกจากนี้แอปของคุณจะทำงานได้เร็วขึ้นมาก

คุณสามารถแก้ไข Scheme สำหรับเครื่องจำลองและอุปกรณ์จริงของคุณได้โดยทำดังต่อไปนี้:

1. ในโครงการใน XCode
2. Product> Scheme>Edit Scheme...
3. เปลี่ยนBuild ConfigurationจากDebugเป็นRelease.

สำหรับผู้ที่มาด้วยวิธีนี้พยายามปิดคำเตือนสีแดงจากคอนโซลซึ่งให้ข้อมูลที่ไร้ประโยชน์อย่างแท้จริง ณ วันที่ 17 กุมภาพันธ์คุณสามารถเพิ่มบรรทัดของรหัสนี้ได้ที่ใดที่หนึ่ง

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

ปิดการใช้งานทั้งหมด console.error

console.disableYellowBox = จริง;

สิ่งนี้ใช้ได้กับระดับแอปพลิเคชันวางไว้ที่ใดก็ได้ในไฟล์ index.js

ปิดการใช้งานกล่องสีเหลืองที่console.disableYellowBox = true;ใดก็ได้ในแอปพลิเคชันของคุณ โดยปกติจะอยู่ในไฟล์รูทดังนั้นมันจะใช้กับทั้ง iOS และ Android

สำหรับรายละเอียดเพิ่มเติมโปรดตรวจสอบเอกสารอย่างเป็นทางการ

console.disableYellowBox = จริง;

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

ฉันพบว่าแม้ว่าฉันจะปิดการใช้งานคำเตือนเฉพาะ (ข้อความในกล่องสีเหลือง) โดยใช้วิธีการที่กล่าวมาข้างต้นคำเตือนก็ถูกปิดการใช้งานบนอุปกรณ์มือถือของฉัน แต่คำเตือนเหล่านั้นยังคงถูกบันทึกไว้ในคอนโซลของฉันซึ่งสร้างความรำคาญและเสียสมาธิมาก

เพื่อป้องกันไม่ให้มีการบันทึกคำเตือนลงในคอนโซลของคุณคุณสามารถแทนที่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.disableYellowBox = true;คุณยังสามารถดูได้ว่ามีคำเตือนหรือข้อผิดพลาดอยู่ที่ไหน แต่จะไม่รบกวนคุณ WT-Console Github Repo: https://github.com/WeBankFinTech/wt-console

ในไฟล์AppDelegate.mของคุณคุณสามารถเปลี่ยนบรรทัดนี้:

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

และแทนที่dev=trueโดยdev=falseในตอนท้าย

ที่เกี่ยวข้อง: ระงับคำเตือน Xcode จากไลบรารี React Native

(แต่ไม่ใช่สำหรับรหัสของคุณเอง)

ทำไม:เมื่อเริ่มต้นแอป RN ใหม่โปรเจ็กต์ Xcode จะมีคำเตือนที่ใกล้เคียงกับ 100 คำเตือนซึ่งทำให้เกิดเสียงรบกวน (แต่อาจไม่เป็นอันตรายอย่างอื่น)

วิธีแก้ปัญหา:ตั้งค่าการยับยั้งคำเตือนทั้งหมดเป็นใช่ภายใต้การตั้งค่าสร้างสำหรับเป้าหมายที่เกี่ยวข้อง

ปิดการใช้งานคำเตือนใน Xcode จากเฟรมเวิร์ก

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