webentwicklung-frage-antwort-db.com.de

Wie öffne ich ein reaktives Entwicklungsmenü auf einem realen Gerät?

Ich habe bereits eine Reihe von Grenzfällen und seltsamen Entwickleroberflächen gesehen.

Vom "shake your device" , was besonders bei einem Tablet wirklich unpraktisch ist

Um Android-Studio um einen Tastendruck zu simulieren.

Gibt es eine konsequente Möglichkeit, dies zu tun? Können wir nicht eine interne API verwenden, um eine Debug-Schaltfläche in unserer App zu haben, um ein Menü wie navigator.popUpDevMenu() zu starten?

Und wenn nicht, wie schütteln Sie Ihr Tablet, damit es funktioniert? Dies ist zur Lösung von How To So konfigurieren Sie HMR auch auf einem realen Gerät . React native verbessert die Entwicklungserfahrung, aber ich würde sagen, dass bestimmte Dinge es etwas verlangsamen.

14
jsdario

Wenn Sie mit einem Mac arbeiten, gibt es ein praktisches Werkzeug namens Frappe. https://github.com/niftylettuce/frappe

Sie können diesen Befehl von der Shell aus verwenden

adb Shell input keyevent 82

wenn Sie react-native run-Android nicht ausgeführt haben oder wenn das Gerät getrennt wird, nachdem Sie react-native run-Android ausgeführt haben. Sie müssen den Port des Entwicklungsservers erneut aktivieren . Sie können diesen Befehl ausführen und den vorherigen Befehl erneut versuchen

adb reverse tcp:8081 tcp:8081

EDIT: Diese Lösung funktioniert nur für Android-Geräte und gehört zu den in der obigen Frage vorgeschlagenen Hacks. Also ist es verbesserungsfähig. Es wird jedoch als gültige Antwort ausgewählt, bis dies geschieht.

41
agent_hunt

Ich füge eine einfache absolut positionierte Schaltfläche und diesen onClick-Handler hinzu

imoprt { NativeModules } from 'react-native';
...
onMenuButtonClick(){
 NativeModules.DevMenu.show();
}
1
Sajjad Ashraf

Folgendes mache ich:

Android:

Fügen Sie Ihrem package.json ein Skript hinzu:

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

Sie können dann yarn Android-shake aufrufen, um das Menü unter Android aufzurufen (sofern das Gerät an den Computer angeschlossen ist).

iOS

Einstellungen -> Eingabehilfen -> AssistiveTouch

  1. Mach es an.
  2. Tippen Sie auf Oberste Menü anpassen ...
  3. Entfernen Sie alle Symbole bis auf eines und stellen Sie es auf Schütteln.

Dadurch erhalten Sie eine Schaltfläche, die Sie antippen können, anstatt das Gerät zu schütteln.

Ich hoffe das kann anderen helfen.

 enter image description here

0
Francois Nadeau

Wenn Sie ein Xiaomi-Telefon besitzen, funktioniert die angegebene Antwort nicht, da das Popup-Fenster mit einer Sicherheitsoption nicht geöffnet werden kann und Sie dies für Ihre App zulassen müssen:

Gehen Sie zu Einstellungen> Installierte Apps> [Name Ihrer App]> Berechtigung Manager und aktivieren Sie "Popup-Fenster anzeigen".

Wieder schütteln Das Entwicklermenü sollte wie erwartet mit einem .__ angezeigt werden. wenig zittern.

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

0
ZedTuX

Ich habe eine Bibliothek erstellt, mit der Sie verwenden Sie 3 Fingerberührungen anstelle von Shake, um das Dev-Menü zu öffnen, wenn Sie sich im Entwicklungsmodus befinden

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

Sie müssen nur Ihre App in sich wickeln:

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

Es ist wirklich nützlich, wenn Sie auf einem echten Gerät debuggen müssen und Kollegen neben Ihnen sitzen.

0
pie6k