Come fare il login in React Native?

Come posso registrare una variabile in React Native, come usare console.logdurante lo sviluppo per il web?

console.log lavori.

Per impostazione predefinita su iOS, accede al riquadro di debug all'interno di Xcode.

Dal simulatore IOS premere ( ⌘+ D) e premere Debug JS remoto . Questo aprirà una risorsa, http: // localhost: 8081 / debugger-ui su localhost. Da lì utilizzare la console javascript degli strumenti di sviluppo di Chrome per visualizzareconsole.log

Usa console.log, console.warnecc.

A partire da React Native 0.29 puoi semplicemente eseguire quanto segue per vedere i log nella console:

$ react-native log-ios
$ react-native log-android

Pre React Native 0.29, eseguilo nella console:

adb logcat *:S ReactNative:V ReactNativeJS:V

Post React Native 0.29, eseguire:

react-native log-ios

o

react-native log-android

Come ha detto Martin in un'altra risposta.

Questo mostra tutto console.log (), errori, note, ecc. E provoca zero rallentamenti.

Uso console.debug("text");

Vedrai i registri all'interno del terminale.

passi:

• Esegui l'applicazione:

react-native run-ios        # For iOS
react-native run-android    # For Android

• Esegui il logger:

react-native log-ios        # For iOS
react-native log-android    # For Android

Visual Studio Code ha una discreta console di debug che può mostrare il tuo console.log.

Il codice VS è, il più delle volte, React Native friendly.

Qui è dove Chrome Developer Tools è tuo amico.

I seguenti passaggi dovrebbero accedere agli Strumenti per sviluppatori di Chrome, dove potrai vedere le tue console.logdichiarazioni.

passi

1. Installa Google Chrome , se non l'hai già fatto
2. Esegui l'app usando react-native run-androidoreact-native run-ios
3. Apri il menu sviluppatore
   • Mac: ⌘+D per iOS o ⌘Mper Android iOS
   • Windows / Linux: agita il telefono Android
4. Selezionare Debug JS Remotely
5. Questo dovrebbe avviare il debugger in Chrome
6. In Chrome: Tools -> More Tools -> Developer Optionse assicurati di essere nella consolescheda

Ora, ogni volta console.logche viene eseguita un'istruzione, questa dovrebbe apparire in Chrome Dev Tools. La documentazione ufficiale è qui .

Esistono 3 metodi che utilizzo per il debug durante lo sviluppo di app React Native:

1. console.log(): mostra in console
2. console.warn(): mostra in fondo alla casella gialla dell'applicazione
3. alert(): viene visualizzato come prompt proprio come nel Web

Preferisco raccomandarvi ragazzi che usano React Native Debugger. Puoi scaricarlo e installarlo usando questo comando.

brew update && brew cask install react-native-debugger

o

Basta controllare il link qui sotto.

https://github.com/jhen0409/react-native-debugger

Happy Hacking!

Ho avuto lo stesso problema: i messaggi della console non venivano visualizzati nell'area di debug di XCode. Nella mia app ho eseguito cmd-d per visualizzare il menu di debug e mi sono ricordato di aver impostato "Debug in Safari".

L'ho disattivato e alcuni messaggi sono stati stampati sul messaggio di output, ma non sui messaggi della mia console. Tuttavia, uno dei messaggi di registro diceva:

__DEV__ === false, development-level warning are OFF, performance optimizations are ON"

Questo perché avevo precedentemente raggruppato il mio progetto per il test su un dispositivo reale con il comando:

react-native bundle --minify

Questo in bundle senza "dev-mode" su. Per consentire i messaggi di sviluppo, includere il flag --dev:

react-native bundle --dev

E i messaggi console.log sono tornati! Se non si raggruppamento per un vero e proprio dispositivo, non dimenticare di ri-punto jsCodeLocationin AppDelegate.ma localhost (ho fatto!).

Premi [comando + controllo + Z] in Xcode Simulator, scegli Debug JS da remoto, quindi premi [comando + opzione + J] per aprire gli strumenti di sviluppo di Chrome.

Xcode Simulator Img

consultare ：Debug delle app native di React

È così semplice ottenere i log in React-Native

Usa console.log e console.warn

console.log('character', parameter)

console.warn('character', parameter)

Questo registro è possibile visualizzare nella console del browser. Se si desidera controllare il registro del dispositivo o pronunciare il registro APK di produzione, è possibile utilizzare

adb logcat

adb -d logcat

Il modulo reazioni-nativo-xlog che può aiutarti, è Xlog di WeChat per reazione-nativo. Che può essere emesso nella console Xcode e nel file di registro, i file di registro del prodotto possono aiutarti a eseguire il debug.

Xlog.verbose('tag', 'log');
Xlog.debug('tag', 'log');
Xlog.info('tag', 'log');
Xlog.warn('tag', 'log');
Xlog.error('tag', 'log');
Xlog.fatal('tag', 'log');

Registrazione dei tempi di sviluppo

Per la registrazione dei tempi di sviluppo, è possibile utilizzare console.log () . Una cosa importante, se si desidera disabilitare la registrazione in modalità di produzione, quindi nel file Root Js dell'app, basta assegnare una funzione vuota come questa - console.log = {} Disabiliterà l'intera pubblicazione dei log nell'intera app, che in realtà è richiesta in produzione modalità come console.log richiede tempo.

Run Time Logging

In modalità di produzione, è inoltre necessario visualizzare i registri quando gli utenti reali utilizzano l'app in tempo reale. Questo aiuta a comprendere bug, utilizzo e casi indesiderati. Ci sono molti strumenti a pagamento di terze parti disponibili sul mercato per questo. Uno di quelli che ho usato è di Logentries

La cosa buona è che Logentries ha anche il modulo nativo React . Quindi, ci vorrà molto meno tempo per abilitare la registrazione in fase di esecuzione con la tua app mobile.

Qualcosa che è appena uscito circa un mese fa è "Crea React Native App", una fantastica piastra della caldaia che ti consente (con il minimo sforzo) di mostrare l'aspetto della tua app dal vivo sul tuo dispositivo mobile (QUALSIASI con una videocamera) usando l'app Expo . Non ha solo aggiornamenti live, ma ti permetterà di vedere i registri della console nel tuo terminale proprio come quando si sviluppa per il Web , piuttosto che dover usare il browser come abbiamo fatto con React Native in precedenza.

Ovviamente, dovresti realizzare un nuovo progetto con quella piastra di controllo ... ma se devi migrare i tuoi file, questo non dovrebbe essere un problema. Dagli Un colpo.

Modifica: in realtà non richiede nemmeno una fotocamera. Ho detto che per la scansione di un codice QR, ma puoi anche digitare qualcosa per sincronizzarlo con il tuo server, non solo un codice QR.

Esistono due opzioni per eseguire il debug o ottenere l'output dell'applicazione nativa reattiva durante l'utilizzo

Emulatore o dispositivo reale

Per il primo utilizzo dell'emulatore: utilizzare

log-android di reazione nativo o log-ios di reazione nativo

per ottenere l'output del registro

sul dispositivo reale. agita il tuo dispositivo

quindi il menu verrà da dove selezioni il debug remoto e aprirà questa schermata nel tuo browser. così puoi vedere l'output del tuo registro nella scheda della console.

Utilizzare il debugger nativo di reazione per la registrazione e l'archivio redux https://github.com/jhen0409/react-native-debugg

Basta scaricarlo ed eseguirlo come software, quindi abilitare la modalità Debug dal simulatore.

Supporta altre funzionalità di debug proprio come elemento negli strumenti di sviluppo di Chrome, che aiuta a vedere lo stile fornito a qualsiasi componente.

Ultimo supporto completo per gli strumenti di sviluppo redux

1. Inserisci il console.log("My log text")tuo codice
2. vai ai tuoi strumenti da riga di comando
3. posizionarsi nella sua cartella di sviluppo

In Android:

• scrivi questo comando: React-native log-android

In IOS:

• scrivi questo comando: React-native log-ios

È possibile utilizzare js remoti debugly opzione dal dispositivo o si può semplicemente utilizzare reagire-native log-android e reagire nativo log-IO per iOS.

console.log () è il modo semplice per eseguire il debug del codice ma deve essere utilizzato con la funzione freccia o bind () durante la visualizzazione di qualsiasi stato. Il link potrebbe essere utile.

Puoi farlo in 2 metodi

1> usando avvisa

console.warn("somthing " +this.state.Some_Sates_of_variables);

2> Utilizzando Alert Questo non va bene ogni volta che raggiunge un avviso, quindi ogni volta che si aprirà il pop, quindi se fare loop significa che non è preferibile usare questo

Import the {Alert} from 'react-native'
   // use this alert
   Alert.alert("somthing " +this.state.Some_Sates_of_variables);

Utenti con Windows e Android Studio:

Lo troverai sotto Logcat in Android Studio. Esistono molti messaggi di registrazione che vengono visualizzati qui, quindi potrebbe essere più semplice creare un filtro per "ReactNativeJS" che mostrerà solo i messaggi console.log creati all'interno dell'applicazione nativa di reazione.

Ogni sviluppatore che affronta questo problema di debug con il nativo di reazione, anche io ho affrontato anche questo e mi riferisco a questo e la soluzione è sufficiente per me a livello iniziale, copre alcuni modi che ci aiutano a provare e usare ciò che è sempre a nostro agio con noi

1. Debug con console.log
2. Codice di debug (logica) con Nuclide
3. Codice di debug (logica) con Chrome
4. Utilizzare Xcode per eseguire il debug della GUI

https://codeburst.io/react-native-debugging-tools-3a24e4e40e4

Puoi anche utilizzare Reactotron, ti darà molte più funzionalità rispetto alla sola registrazione. https://github.com/infinitered/reactotron

Ci sono diversi modi per raggiungere questo obiettivo, li sto elencando e includendo anche i contro nell'usarli. Puoi usare:

1. console.loge visualizzare le istruzioni di registrazione, senza optare per l'opzione di debug remoto da strumenti di sviluppo, Android Studio e Xcode. oppure puoi optare per l'opzione di debug remoto e visualizzare la registrazione su strumenti di sviluppo Chrome o vscode o qualsiasi altro editor che supporti il ​​debug, devi essere cauto poiché questo rallenterà il processo nel suo insieme.
2. Puoi usarlo console.warnma lo schermo del tuo cellulare verrebbe inondato da quelle strane scatole gialle che potrebbero o non potrebbero essere fattibili in base alla tua situazione.
3. Il metodo più efficace che ho riscontrato è utilizzare uno strumento di terze parti, Reactotron . Uno strumento semplice e facile da configurare che consente di visualizzare ogni istruzione di registrazione di diversi livelli (errore, debug, avviso, ecc.). Ti fornisce lo strumento GUI che mostra tutta la registrazione della tua app senza rallentare le prestazioni.

Usi la stessa cosa usata per il web normale. Il consolecomando funziona anche in questo caso. Ad esempio, è possibile utilizzare console.log(), console.warn(), console.clear()etc.

Puoi utilizzare Chrome Developer per utilizzare il consolecomando durante la registrazione mentre esegui l'app React Native.

console.log() è il modo migliore e semplice per visualizzare la console di accesso quando si utilizza il debugger js remoto dal menu dello sviluppatore

Chrome Devtool è il modo migliore e più semplice per la registrazione e il debug.

Se sei su osx e stai usando un emulatore, puoi visualizzare il tuo console.log direttamente in Safari Web Inspector.

Safari => Sviluppo => Simulatore - [la tua versione del simulatore qui] => JSContext

Esistono normalmente due scenari in cui è necessario il debug.

1. Quando affrontiamo problemi relativi ai dati e vogliamo controllare i nostri dati e il debug relativi ai dati in quel caso console.log('data::',data)

   e debug js da remoto è l'opzione migliore.

2. Un altro caso è rappresentato dall'interfaccia utente e dai problemi relativi agli stili in cui è necessario verificare lo stile del componente in tal caso reagire-strumenti di sviluppo è l'opzione migliore.

   entrambi i metodi menzionati qui.

console.log può essere utilizzato per qualsiasi progetto JS. Se esegui l'app in localhost, ovviamente è simile a qualsiasi progetto javascript. Ma mentre usi il simulatore o qualsiasi dispositivo, collega quel simulatore al nostro localhost e possiamo vedere nella console.