Reference version

Expo DevMenu

一个为调试构建提供开发者菜单的库。

Android
iOS
tvOS

For the complete documentation index, see llms.txt. Use this Use this file to discover all available pages.

expo-dev-menu 可以作为任何 Expo 项目中的独立库使用。它尤其适用于不需要完整 expo-dev-client 启动器界面的 brownfield 应用

expo-dev-menu 为 React Native 应用提供了一个开发者菜单 UI,其中包括:

  • 一个强大且可扩展的菜单 UI,可通过摇动手势或三指长按访问
  • 快速访问常见开发操作
  • 支持自定义菜单项以扩展功能

安装

Terminal
npx expo install expo-dev-menu

If you are installing this in an existing React Native app, make sure to install expo in your project.

用法

安装完成后,开发者菜单将在你的调试构建中可用。你可以通过以下方式打开它:

  • 摇动手势:摇动你的设备
  • 三指长按:在屏幕上用三根手指长按
  • 通过编程:在代码中调用 DevMenu.openMenu()

扩展 dev menu

可以通过使用 registerDevMenuItems API 来扩展 dev menu,以包含额外按钮:

import { registerDevMenuItems } from 'expo-dev-menu'; const devMenuItems = [ { name: 'My Custom Button', callback: () => console.log('Hello world!'), }, ]; registerDevMenuItems(devMenuItems);

这将会在 dev menu 中创建一个新的区域,其中包含你已注册的按钮:

注意: 后续对 registerDevMenuItems 的调用将覆盖所有先前的条目。

与 expo-dev-client 一起使用

如果你正在使用 开发构建,请改为安装 expo-dev-client。它包含 expo-dev-menu,以及额外的开发工具:

  • 一个可配置的启动器 UI,用于在不同开发服务器之间切换
  • 改进的调试工具
  • 支持从 EAS Update 加载更新
Terminal
npx expo install expo-dev-client

有关更多信息,请查看 expo-dev-client 参考

API

import * as DevMenu from 'expo-dev-menu';

Methods

DevMenu.closeMenu()

Android
iOS
tvOS

A method that closes development client menu when called.

Returns:
void

DevMenu.hideMenu()

Android
iOS
tvOS

A method that hides development client menu when called.

Returns:
void

DevMenu.openMenu()

Android
iOS
tvOS

A method that opens development client menu when called.

Returns:
void

DevMenu.registerDevMenuItems(items)

Android
iOS
tvOS
ParameterType
itemsExpoDevMenuItem[]

A method that allows to specify custom entries in the development client menu.

Returns:
Promise<void>

Types

ExpoDevMenuItem

Android
iOS
tvOS

An object representing the custom development client menu entry.

PropertyTypeDescription
callback() => void

Callback to fire, when user selects an item.

namestring

Name of the entry, will be used as label.

shouldCollapse(optional)boolean

A boolean specifying if the menu should close after the user interaction.

Default:false