web-dev-qa-db-fra.com

Comment "secouer" un périphérique Android dans l'émulateur Android pour afficher le menu dev permettant de déboguer mon application React Native

Je travaille sur une application mobile multi-plateformes React Native. J'écris des déclarations console.log au fur et à mesure que je développe. Je souhaite voir ces instructions de journalisation dans Chrome pendant l'exécution de l'application Android dans l'émulateur Android par défaut. Selon la documentation de Facebook il me suffit de "secouer l'appareil". Comment puis-je faire cela dans l'émulateur Android?

Pour accéder au menu du développeur intégré à l'application:

Sur iOS, secouez l'appareil ou appuyez sur les touches Ctrl + + z du simulateur . Sous Android, secouez le périphérique ou appuyez sur le bouton de menu du matériel (disponible sur les anciens> périphériques et dans la plupart des émulateurs, par exemple dans genymotion, vous pouvez appuyer sur + m pour> simuler un clic du bouton du menu du matériel).

androidandroid-emulatorreact-native
144
Austin

Dans votre application dans Android Emulator, appuyez sur Command + M sous OSX ou Ctrl + M sous Linux et Windows.

125
Ryan McDermott

Avec un React Native en cours d'exécution dans l'émulateur,
Presse ctrl+m (pour Linux, je suppose que c'est pareil pour Windows et ⌘+m pour Mac OS X) ou exécutez les opérations suivantes dans le terminal:

adb Shell input keyevent 82
195
ericn

Si vous utilisez le nouvel émulateur fourni avec Android Studio 2.0, le raccourci clavier de la touche de menu est maintenant Cmd + M, comme dans Genymotion.

Alternativement, vous pouvez toujours envoyer un appui sur un bouton de menu en utilisant adb dans un terminal:

adb Shell input keyevent KEYCODE_MENU

Notez également que le raccourci du bouton de menu n'est pas une exigence stricte, c'est simplement le comportement par défaut fourni par la classe Java ReactActivity (utilisée par défaut si vous avez créé votre projet avec react-native init). Voici le code correspondant de onKeyUp dans ReactActivity.Java:

if (keyCode == KeyEvent.KEYCODE_MENU) {
  mReactInstanceManager.showDevOptionsDialog();
  return true;
}

Si vous ajoutez React Native à une application existante ( documentation here ) et que vous n'utilisez pas ReactActivity, vous devez raccorder le bouton de menu de la même manière. Vous pouvez également appeler ReactInstanceManager.showDevOptionsDialog par tout autre mécanisme. Par exemple, dans une application sur laquelle je travaille, j'ai ajouté un élément de menu de la barre d'action réservé aux développeurs qui ouvre le menu, car je trouve cela plus pratique que de secouer le périphérique lorsque vous travaillez sur un périphérique physique.

74
Alan Pierce

'Ctrl + m' fonctionne pour Windows dans l'émulateur Android pour afficher le menu du développeur de React-Native.

Impossible de trouver cela documenté nulle part ... J'ai trouvé mon chemin ici, devinais le reste ... Bon chagrin.

Au fait: OP: Vous n'avez pas mentionné quel système d'exploitation vous utilisiez.

21
spechter

'Command + M' pour OSX fonctionne pour moi.

8
VolkanSahin45

Utilisez command + m(cmd + M) sur MAC. Aussi make sure that you are accessing your application while you try to access the Debug Menui.e. votre application doit être en cours d'exécution sinon Cmd + M renverra simplement le menu habituel du téléphone. 

4
Awesome

Pour Linux, cliquez sur les trois points "..." à côté de l'émulateur. Dans Capteurs virtuels, cochez l'option "Déplacer" puis essayez de déplacer rapidement les coordonnées x, y ou z.

 enter image description here

3
Nicolas Pansardi

Je suis sous Mac OS alors quand j'appuie sur Commande, cela active l'option de zoom . Voici ma solution

  • Bouton Ouvrir la fenêtre de configuration [...]
  • Aller à l'onglet Settings -> onglet General -> champ Send keyboard shortcuts to
  • Changez la valeur en Virtual device" comme indiqué dans l'image

Après cela, concentrez-vous sur l'émulateur et appuyez sur Commande + M, le menu dev apparaît.

 Emulator Option -> Settings -> General

2
Leu

sous linux, ctrl + m devrait fonctionner, mais pour résoudre le problème, cliquez sur le (...) (ses commandes étendues), puis fermez cette fenêtre. puis:

  1. cliquez sur le bouton (...) (ses commandes étendues)

  2. fermer les contrôles étendus

  3. ctrl + m

1
roozbeh siadatzadeh

Pour les ordinateurs portables Windows Fn Key + Control + m

0
UMUT

J'essayais sur un version build via adb install -r -d <app-release>.apk ????

Assurez-vous que vous exécutez la version debug, le menu fonctionnera via le raccourci ou la CLI.

0
Leo

Ce n'est peut-être pas une solution directe, mais j'ai créé une librairie qui vous permet d'utiliser 3 doigts au lieu de shake pour ouvrir le menu dev, en mode développement.

https://github.com/pie6k/react-native-dev-menu-on-touch

Vous devez seulement envelopper votre application à l'intérieur:

importer DevMenuOnTouch de 'réagir-native-dev-menu-tactile';; // ou: importer {DevMenuOnTouch} de 'réagir-native-dev-menu-tactile'

class YourRootApp extends Component {
  render() {
    return (
      <DevMenuOnTouch>
        <YourApp />
      </DevMenuOnTouch>
    );
  }
}

C'est vraiment utile lorsque vous devez déboguer sur un périphérique réel et que des collègues sont assis à côté de vous.

0
pie6k