web-dev-qa-db-fra.com

Comment ouvrir le menu de développement réactif natif sur un périphérique réel

J'ai déjà vu un certain nombre de cas de frontière et d'interface de développeur étrange.

Depuis le "secouez votre appareil" , ce qui n’est vraiment pas pratique, spécialement avec une tablette

Pour travailler autour du studio Android pour simuler une pression sur un bouton.

Y a-t-il une manière cohérente de le faire? Ne pouvons-nous pas utiliser une API interne pour avoir un bouton de débogage dans notre application pour lancer un menu tel que navigator.popUpDevMenu()?

Et si non, comment secouez-vous votre tablette pour la faire fonctionner. Ceci est destiné à résoudre Comment configurer HMR sur un périphérique réel , aussi. React native améliore l'expérience de développement, mais je dirais que cela le ralentit un peu.

androidiosreactjsreact-nativewebpack-hmr
14
jsdario

Si vous êtes sur un Mac, il existe un outil pratique appelé Frappe. https://github.com/niftylettuce/frappe

Vous pouvez utiliser cette commande depuis le shell

adb Shell input keyevent 82

si vous n'avez pas exécuté react-native run-Android ou si le périphérique est déconnecté après avoir exécuté le react-native run-Android. Vous devez réactiver le port du serveur de développement . Vous pouvez exécuter cette commande et réessayer avec la commande précédente

adb reverse tcp:8081 tcp:8081

EDIT: cette solution ne fonctionne que pour les appareils Android et fait partie des astuces proposées dans la question ci-dessus. Donc, c'est améliorable. Cependant, il est sélectionné comme réponse valide jusqu'à ce que cela se produise.

41
agent_hunt

Voici ce que je fais:

Android:

Ajoutez un script à votre package.json:

"Android-shake": "adb Shell input keyevent 82"

Vous pourrez alors appeler yarn Android-shake pour afficher le menu contextuel sur Android (tant que l'appareil est connecté à l'ordinateur).

iOS

Paramètres -> Accessibilité -> AssistiveTouch

  1. Allume ça.
  2. Tapez sur Personnaliser le menu de niveau supérieur ...
  3. Supprimez toutes les icônes sauf une et configurez-la pour la secouer.

Cela vous donnera un bouton que vous pouvez appuyer au lieu de secouer l'appareil.

J'espère que cela peut aider les autres.

 enter image description here

0
Francois Nadeau

Dans le cas où vous avez un téléphone Xiaomi, la réponse donnée ne fonctionnera pas, car une fenêtre contextuelle empêchée pour l'option de sécurité est ouverte et que vous devez l'autoriser pour votre application:

Allez dans Paramètres> Applications installées> [Nom de votre application]> Permission gestionnaire, et activez «Afficher la fenêtre contextuelle».

Secouez encore. Le menu du développeur devrait apparaître comme prévu avec juste un petite secousse.

Source: https://matthewphiong.com/debugging-react-native-app-on-a-xiaomi-phone

0
ZedTuX

J'ai créé une bibliothèque qui vous permet d'utiliser 3 doigts au lieu de secouer 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:

import DevMenuOnTouch from 'react-native-dev-menu-on-touch';
// or:  import { DevMenuOnTouch } from '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 périphérique réel et que des collègues sont assis à côté de vous.

0
pie6k