React Native iOS simülatöründe uyarıları nasıl gizlersiniz?

React Native'imi yeni yükselttim ve şimdi iOS simülatöründe bir sürü uyarı var. Onları düzeltmenin yanı sıra, altında ne olduğunu görebilmek için bu uyarıları nasıl gizleyebilirim?

React Native Documentation'a göre , disableYellowBoxaşağıdaki truegibi ayarlayarak uyarı mesajlarını gizleyebilirsiniz :

console.disableYellowBox = true;

Güncelleme

~~ console.disableYellowBox ~~ kaldırıldı ve şimdi kullanabilirsiniz:

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

tüm günlük bildirimlerini yok saymak için

Belirli uyarıları seçerek gizlemenin daha iyi bir yolu (en son ve en büyük RN sürümüne yükseltme sonrasında süresiz olarak görünür ), console.ignoredYellowBox'ı projenizdeki ortak bir JS dosyasında ayarlamaktır . Örneğin, bugün projemi RN 0.25.1'e yükselttikten sonra çok şey görüyordum ...

Uyarı: ReactNative.createElement kullanımdan kaldırıldı ...

Yine de React-Native'den yararlı uyarıları ve hata mesajlarını görebilmek istiyorum, ancak bu özel uyarıyı ezmek istiyorum çünkü henüz RN 0.25'teki son değişiklikleri içermeyen harici bir npm kitaplığından geliyor. Yani App.js dosyamda bu satırı ekliyorum ...

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

Bu şekilde, geliştirme ortamım için yararlı olan başka hatalar ve uyarılar almaya devam ediyorum, ancak artık o belirli hatayı görmüyorum.

Sarı kutu yerini devre dışı bırakmak için

console.disableYellowBox = true; 

uygulamanızın herhangi bir yerinde. Genellikle kök dosyadadır, bu nedenle hem iOS hem de Android için geçerli olacaktır.

Örneğin

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

add this line in your app main screen.

console.disableYellowBox = true;

örneğin: - index.js dosyasında

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;

Herhangi bir bileşenin yaşam döngüsü yöntemi altındaki app.js dosyanızda, componentDidmount () 'daki gibi, bunların her ikisini de eklemeniz gerekir, hiçbiri çalışmayacaktır.

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

Index.js dosyanıza aşağıdaki kodu ekleyin

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

Uygulamayı Hızlıca Demo Vermeye Çalışıyorsanız .

Demo veya başka bir şey yaptığınız için bunları belirli bir yapıda gizlemek istiyorsanız, Xcode şemanızı bir sürüm yapısı yapmak için düzenleyebilirsiniz ve bu sarı uyarılar görünmeyecektir. Ek olarak, uygulamanız çok daha hızlı çalışacaktır.

Aşağıdakileri yaparak simülatörünüz ve gerçek cihazınız için Şemayı düzenleyebilirsiniz:

1. XCode'daki Projede.
2. Product> Scheme>Edit Scheme...
3. Değişim Build Configurationgelen Debugetmek Release.

Bu yolla gelenler konsoldan, kesinlikle yararsız bilgiler veren kırmızı uyarıları devre dışı bırakmaya çalışanlar için, 17 Şubat itibarı ile bu kod satırını bir yere ekleyebilirsiniz.

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

Hepsini devre dışı bırakır console.error

console.disableYellowBox = true;

bu uygulama seviyesi için çalıştı index.js dosyasında herhangi bir yere koyun

Sarı kutu yerini devre dışı bırakmak için console.disableYellowBox = true; için uygulamanızın herhangi bir . Genellikle kök dosyadadır, bu nedenle hem iOS hem de Android için geçerli olacaktır.

Daha fazla ayrıntı için lütfen resmi belgeyi kontrol edin

console.disableYellowBox = true;

console.ignoredYellowBox = ['Uyarı: Her Biri', 'Uyarı: Başarısız'];

Yukarıda belirtilen yöntemler kullanılarak Devre dışı özel uyarılar (sarı kutu mesajlar), uyarılar zaman bile tespit edildi mobil cihazım devre dışı, ama yine de çok can sıkıcı ve dikkat dağıtıcı benim konsola, günlüğe ediliyordu.

Uyarıların konsolunuzda günlüğe kaydedilmesini önlemek için, basitçe nesne warnüzerindeki yöntemi geçersiz kılabilirsiniz console.

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

Sağlanan mesajı test ederek yalnızca belirli uyarıları devre dışı bırakmak bile mümkündür:

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

Dizeyi test etmek için Normal İfade kullanamıyorsanız (veya kullanmak istemiyorsanız), indexOfyöntem de aynı şekilde çalışacaktır:

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

Bu tekniğin , nereden geldiklerine bakılmaksızın işlevden geçen tüm mesajları filtreleyeceğini unutmayın warn. Bu nedenle, React Native dışında bir yerden kaynaklanabilecek diğer anlamlı hataları bastıracak aşırı cömert bir kara liste belirtmemeye dikkat edin.

Ayrıca, React Native'in console.errorhataları (kırmızı kutu mesajları) günlüğe kaydetmek için yöntemi kullandığına inanıyorum , bu nedenle bu tekniğin belirli hataları filtrelemek için de kullanılabileceğini varsayıyorum.

Ekibimiz tarafından küçük bir araç geliştirmeyi öneriyorum, tüm uyarı ve hataları şamandıra simgesine topluyor. Şununla karşılaştırın console.disableYellowBox = true;, nerede bir uyarı veya hata olduğunu hala görebilirsiniz ancak bu sizi rahatsız etmez. WT-Console Github Repo: https://github.com/WeBankFinTech/wt-console

Senin içinde AppDelegate.m dosyasına bu satırı değiştirebilirsiniz:

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

ve yerine dev=truegöre dev=falsesonunda.

İlgili: React Native kitaplığından Xcode uyarılarını bastırın

(ancak kendi kodunuz için değil)

neden: Yeni bir RN uygulamasını başlatırken, Xcode projesi dikkat dağıtıcı gürültü olan (ancak aksi halde muhtemelen zararsız olan) 100'e yakın uyarı içerir

çözüm: İlgili hedefler için Yapı Ayarları altında tüm uyarıları engelle seçeneğini evet olarak ayarlayın .

Çerçevelerden Xcode'daki uyarıları devre dışı bırakın

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