Comment «secouer» un appareil Android dans l'émulateur Android pour faire apparaître le menu de développement pour déboguer mon application React Native

Je travaille sur une application mobile multi-plateforme React Native. J'écris des instructions console.log au fur et à mesure de mon développement. Je veux voir ces instructions de journalisation dans Chrome pendant que j'exécute l'application Android dans l'émulateur Android par défaut. Selon les documents de Facebook, j'ai juste besoin de "secouer l'appareil". Comment faire cela dans l'émulateur Android?

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

Sur iOS, secouez l'appareil ou appuyez sur Ctrl + ⌘ + Z dans le simulateur. Sur Android, secouez l'appareil ou appuyez sur le bouton du menu matériel (disponible sur les anciens> appareils et dans la plupart des émulateurs, par exemple dans genymotion, vous pouvez appuyer sur ⌘ + m pour> simuler le clic du bouton du menu matériel)

Dans votre application, appuyez Command + Msur l' émulateur Android sur OSX ou Ctrl + Msur Linux et Windows.

Avec un React Native exécuté dans l'émulateur,
appuyez sur ctrl+ m(pour Linux, je suppose que c'est la même chose pour Windows et ⌘+ mpour Mac OS X) ou exécutez ce qui suit dans le terminal:

adb shell input keyevent 82

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

Alternativement, vous pouvez toujours envoyer une pression sur un bouton de menu en utilisant adbdans 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 juste le comportement par défaut fourni par la ReactActivityclasse Java (qui est utilisé par défaut si vous avez créé votre projet avec react-native init). Voici le code pertinent de onKeyUpen ReactActivity.java:

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

Si vous ajoutez React Native à une application existante ( documentation ici ) et que vous ne l'utilisez pas ReactActivity, vous devrez connecter le bouton de menu de la même manière. Vous pouvez également appeler ReactInstanceManager.showDevOptionsDialogvia tout autre mécanisme. Par exemple, dans une application sur laquelle je travaille, j'ai ajouté un élément de menu Action Bar uniquement pour les développeurs qui fait apparaître le menu, car je trouve cela plus pratique que de secouer l'appareil lorsque vous travaillez sur un appareil physique.

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

Impossible de trouver cela documenté nulle part. J'ai trouvé mon chemin ici, deviné le reste ... Bonne douleur.

Au fait: OP: Vous n'avez pas mentionné sur quel OS vous étiez.

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

'Command + M' pour OSX fonctionne pour moi.

Je suis sur Mac OS, donc lorsque j'appuie sur Commande, il active l'option de zoom. Voici ma solution

• Bouton Ouvrir la fenêtre de [...] configuration
• Allez dans l' Settingsonglet -> Generalonglet -> Send keyboard shortcuts tochamp
• Modifiez la valeur Virtual device"comme indiqué dans l'image

Après avoir mis l'accent sur l'émulateur et appuyez sur Commande + M, le menu de développement apparaît.

Utiliser command + m(cmd + M)sur MAC. C'est-à- make sure that you are accessing your application while you try to access the Debug Menudire que votre application doit être en cours d'exécution, sinon Cmd + Melle ne fera que retourner le menu habituel du téléphone.

Comme lors du développement d'applications natives réactives, nous jouons tellement avec le terminal

j'ai donc ajouté un script dans les scripts du fichier package.json

"menu": "adb shell input keyevent 82"

et j'ai touché le menu $ yarn

pour que le menu apparaisse sur l'émulateur, il transmettra le code de clé 82 à l'émulateur via ADB pas de la manière optimale mais je l'aime et j'ai senti le partager.

sur linux, ctrl + m devrait fonctionner mais pas pour résoudre le problème, cliquez sur (...) (ses commandes étendues) puis fermez cette fenêtre. maintenant vous pouvez ouvrir le menu par ctrl + m. puis:

1. cliquez sur le (...) (ses contrôles étendus)

2. fermer les contrôles étendus

3. ctrl + m

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

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

Vous n'avez qu'à envelopper votre application à l'intérieur:

importer DevMenuOnTouch à partir de 'react-native-dev-menu-on-touch'; // ou: importez {DevMenuOnTouch} à partir de 'react-native-dev-menu-on-touch'

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

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

J'essayais de créer une version via adb install -r -d <app-release>.apk🤦

Assurez-vous que vous exécutez la version de débogage , le menu fonctionnera via le raccourci ou l'interface CLI.

Pour les ordinateurs portables Windows fn Key + Control + m