mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
cc068b0551
Summary: I wanted to configure the RN dev menu without having to write native code. This is pretty useful in a greenfield app since it avoids having to write a custom native module for both platforms (and might enable the feature for expo too). This ended up a bit more involved than planned since callbacks can only be called once. I needed to convert the `DevSettings` module to a `NativeEventEmitter` and use events when buttons are clicked. This means creating a JS wrapper for it. Currently it does not export all methods, they can be added in follow ups as needed. ## Changelog [General] [Added] - Export the DevSettings module, add `addMenuItem` method Pull Request resolved: https://github.com/facebook/react-native/pull/25848 Test Plan: Tested in an app using the following code. ```js if (__DEV__) { DevSettings.addMenuItem('Show Dev Screen', () => { dispatchNavigationAction( NavigationActions.navigate({ routeName: 'dev', }), ); }); } ``` Added an example in RN tester  Differential Revision: D17394916 Pulled By: cpojer fbshipit-source-id: f9d2c548b09821c594189d1436a27b97cf5a5737
53 lines
1.4 KiB
JavaScript
53 lines
1.4 KiB
JavaScript
/**
|
|
* Copyright (c) Facebook, Inc. and its affiliates.
|
|
*
|
|
* @format
|
|
*/
|
|
|
|
import NativeDevSettings from '../NativeModules/specs/NativeDevSettings';
|
|
import NativeEventEmitter from '../EventEmitter/NativeEventEmitter';
|
|
|
|
class DevSettings extends NativeEventEmitter {
|
|
_menuItems: Map<string, () => mixed>;
|
|
|
|
constructor() {
|
|
super(NativeDevSettings);
|
|
|
|
this._menuItems = new Map();
|
|
}
|
|
|
|
addMenuItem(title: string, handler: () => mixed) {
|
|
// Make sure items are not added multiple times. This can
|
|
// happen when hot reloading the module that registers the
|
|
// menu items. The title is used as the id which means we
|
|
// don't support multiple items with the same name.
|
|
const oldHandler = this._menuItems.get(title);
|
|
if (oldHandler != null) {
|
|
this.removeListener('didPressMenuItem', oldHandler);
|
|
} else {
|
|
NativeDevSettings.addMenuItem(title);
|
|
}
|
|
|
|
this._menuItems.set(title, handler);
|
|
this.addListener('didPressMenuItem', event => {
|
|
if (event.title === title) {
|
|
handler();
|
|
}
|
|
});
|
|
}
|
|
|
|
reload() {
|
|
NativeDevSettings.reload();
|
|
}
|
|
|
|
// TODO: Add other dev setting methods exposed by the native module.
|
|
}
|
|
|
|
// Avoid including the full `NativeDevSettings` class in prod.
|
|
class NoopDevSettings {
|
|
addMenuItem(title: string, handler: () => mixed) {}
|
|
reload() {}
|
|
}
|
|
|
|
module.exports = __DEV__ ? new DevSettings() : new NoopDevSettings();
|