How do I open react-native's dev menu on real device

问题

I have seen already a number of border cases and strange developer interface.

From the "shake your device", which is really impractical, specially with a tablet

To working around Android studio to simulate a button press.

Is there a consistent way to do it? Can't we use a intern API to have a debug button within our app to launch such menu as navigator.popUpDevMenu()?

And if not, how do you shake your tablet to get it working. This is intended to solve How To configure HMR on a real device, too. React native does improve the development experience, but I'd say that particular thing slows it a little bit.

回答1:

If you are on a mac, there is a handy tool called Frappe. https://github.com/niftylettuce/frappe

You can use this command from the shell

adb shell input keyevent 82

if haven't run react-native run-android or if the device gets disconnected after you have run the react-native run-android. You need to re-enable the development server port. You can run this command and try again with the previous command

adb reverse tcp:8081 tcp:8081

EDIT: this solution only works for android devices and is among the hacks proposed in the question above. So it is improvable. However It is selected as valid answer until this happens.

回答2:

Here is what I do:

Android:

Add a script to your package.json:

"android-shake": "adb shell input keyevent 82"

You will then be able to call yarn android-shake to have the menu popup on Android (as long as the device is connected to the computer that is).

iOS

Settings -> Accessibility -> AssistiveTouch

Turn it on.
Tap on Customize Top Level Menu...
Remove all icons but one, and set it to shake.

That will give you a button that you can tap instead of shaking the device.

I hope this can help others.

回答3:

I add a simple absolutely positioned button and this onClick handler to it

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

回答4:

I've created a lib that allows you to use 3 fingers touch instead of shake to open dev menu, when in development mode

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

You only have to wrap your app inside:

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

It's really useful when you have to debug on real device and you have co-workers sitting next to you.

回答5:

In the case you have a Xiaomi phone, the given answer will not work, because there is a security option prevented popup window to open and you need to allow it for your app :

Go to Settings > Installed apps > [Your App Name] > Permission manager, and enable “Display pop-up window”.

Shake again. The developer menu should pop up as expected with just a little shaking.

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

来源：https://stackoverflow.com/questions/37839666/how-do-i-open-react-natives-dev-menu-on-real-device

标签

android

ios

reactjs

react-native

webpack-hmr