# @exodus/react-native-menu 中文文档
规范地址：https://npmcn.com/package/%40exodus/react-native-menu/
版本：2\.0\.0-exodus-5
npm 元数据更新时间：2026-10-06T21:02:53.338Z
中文译文更新时间：2026-11-14T04:17:15.279Z
软件包许可：MIT
本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。
原始 npm 页面：https://www.npmjs.com/package/%40exodus/react-native-menu
原文对照：https://npmcn.com/package/%40exodus/react-native-menu/?lang=original
项目主页：https://github.com/ExodusMovement/react-native-menu#readme
源码仓库：https://github.com/ExodusMovement/react-native-menu
## 关键信息（来自 npm 元数据）
- 包体积（解压后）：76.8 kB，60 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：0 个
- peer 依赖：react \*，react-native \*
- 首次发布：2025-10-29T09:04:49.385Z
- 最新版本发布：2026-01-01T18:07:40.517Z
- 近 30 天下载量：10395（2026-10-14 至 2026-11-12，npm 官方下载统计）
- 已发布版本数：6（近 12 个月 2 个）
## 中文简介
反应-内生的UIMenu组件(仅iOS)
## 安装
```sh
npm install @exodus/react-native-menu
```
也可以使用：`pnpm add @exodus/react-native-menu`、`yarn add @exodus/react-native-menu`、`bun add @exodus/react-native-menu`
## README
# @ exodus/ react- native-菜单
 
iOS14+UIMenu组件用于反应-内生. 倒回ActionSheet为iOS14下方的版本.
| iOS 14+ (英语) | iOS 13 |
| --- | --- |
|  |  |
## 安装
通过 npm :
```sh
npm install @exodus/react-native-menu
```
通过线条 :
```sh
yarn add @exodus/react-native-menu
```
### 在 iOS 上安装 React 原生 0.63 及以上
有一个问题([https://github.com/facebook/react-native/issues/29246 (英语)](https://github.com/facebook/react-native/issues/29246)),导致带有此模块的项目在React Industrial 0.63及以上的基础上失败. 这个问题可能在将来版本的原生反应中固定下来. 作为工作,寻找线在 `[YourPrject].xcodeproj` 下级 `LIBRARY_SEARCH_PATHS` 与 `"\"$(TOOLCHAIN_DIR)/usr/lib/swift-5.0/$(PLATFORM_NAME)\"",` 更改 `swift-5.0` 改为 `swift-5.3`。 。 。 .
## 链接
软件包是 [自动链接](https://github.com/react-native-community/cli/blob/master/autolinking.md) 当建立应用程序。 你只需要做点什么:
```sh
npx pod-install
```
## 使用量
```jsx
import { MenuView, MenuComponentRef } from "@exodus/react-native-menu";
const App = () => {
const menuRef = useRef < MenuComponentRef > null;
return (
{
console.warn(JSON.stringify(nativeEvent));
}}
actions={[
{
id: "add",
title: "Add",
titleColor: "#2367A2",
image: "plus",
imageColor: "#2367A2",
subactions: [
{
id: "nested1",
title: "Nested action",
titleColor: "rgba(250,180,100,0.5)",
subtitle: "State is mixed",
image: "heart.fill",
imageColor: "rgba(100,200,250,0.3)",
state: "mixed",
},
{
id: "nestedDestructive",
title: "Destructive Action",
attributes: {
destructive: true,
},
image: "trash",
},
],
},
{
id: "share",
title: "Share Action",
titleColor: "#46F289",
subtitle: "Share action on SNS",
image: "square.and.arrow.up",
imageColor: "#46F289",
state: "on",
},
{
id: "destructive",
title: "Destructive Action",
attributes: {
destructive: true,
},
image: "trash",
},
]}
shouldOpenOnLongPress={false}
>
Test
);
};
```
### 申报用途
也有可能获得 `action` 是一种反应性更强的,宣示性的时尚. 参见 [`react-to-imperative`](https://github.com/vonovak/react-to-imperative?tab=readme-ov-file#why) 软件包,并查看示例 [这里](https://github.com/vonovak/react-navigation-header-buttons/blob/cca6ce6d04d3b106efe7aa62279101db33c7941b/example/src/screens/UsageNativeMenu.tsx#L62)。 。 。 .
## 参考文献
### 道具
### `title` (仅iOS)
菜单的标题.
| 类型 | 需求 |
| --- | --- |
| 字符串 | 对 |
### `shouldOpenOnLongPress`
布尔决定菜单是否在长时间后或正常情况下打开
| 类型 | 需求 |
| --- | --- |
| 布尔 | 没有 |
### `actions`
菜单中要显示的动作 .
| 类型 | 需求 |
| --- | --- |
| 菜单动作 \[\] | 对 |
### `themeVariant` (仅iOS)
取消菜单主题的字符串 。 如果你想在你的应用程序上 普遍控制主题, [参见此软件包](https://github.com/vonovak/react-native-theme-control)。 。 。 .
| 类型 | 需求 |
| --- | --- |
| enum ("光","暗") | 没有 |
#### `MenuAction`
代表菜单动作的对象 .
```ts
export type MenuAction = {
/**
* Identifier of the menu action.
* The value set in this id will be returned when menu is selected.
*/
id?: string;
/**
* The action's title.
*/
title: string;
/**
* (iOS14+ only)
* An elaborated title that explains the purpose of the action.
* @platform iOS
*/
subtitle?: string;
/**
* The attributes indicating the style of the action.
*/
attributes?: MenuAttributes;
/**
* (iOS14+ only)
* The state of the action.
* @platform iOS
*/
state?: MenuState;
/**
* (iOS13+ only)
* - The action's image.
* - Allows icon name included in SF Symbol
* @example
* image="plus"
*/
image?: string;
/**
* (iOS13+ only)
* - The action's image color.
*/
imageColor?: number | ColorValue;
/**
* (iOS14+ only)
* - Actions to be displayed in the sub menu
*/
subactions?: MenuAction[];
};
```
#### `MenuAttributes`
表示动作样式的属性 .
```ts
type MenuAttributes = {
/**
* An attribute indicating the destructive style.
*/
destructive?: boolean;
/**
* An attribute indicating the disabled style.
*/
disabled?: boolean;
/**
* An attribute indicating the hidden style.
*/
hidden?: boolean;
};
```
#### `MenuState`
行动状态.
```ts
/**
* The state of the action.
* - off: A constant indicating the menu element is in the "off" state.
* - on: A constant indicating the menu element is in the "on" state.
* - mixed: A constant indicating the menu element is in the "mixed" state.
*/
type MenuState = "off" | "on" | "mixed";
```
### `onPressAction`
选择菜单项时会调用的回调函数 . 它将包含特定行动的ID.
| 类型 | 需求 |
| --- | --- |
| ({本地晚报}}\\\\\\\\ n\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ 无效 | 没有 |
### 活动
#### `onCloseMenu`
取消菜单时会调用的回调函数 。 这起事件在撤职的开始点火,在任何动画完成之前.
| 类型 | 需求 |
| --- | --- |
| () 无效 | 没有 |
#### `onOpenMenu`
打开菜单时会调用的回调函数 。 此事件在菜单显示前即刻起火 .
| 类型 | 需求 |
| --- | --- |
| () 无效 | 没有 |
示例用法:
```jsx
{
console.log("Menu was opened");
}}
onCloseMenu={() => {
console.log("Menu was closed");
}}
>
Open Menu
```
## 用 Jest 进行测试
在某些情况下,您可能想要嘲笑包来测试您的组件. 您可以使用 `jest.mock` 函数.
```ts
import type { MenuComponentProps } from "@exodus/react-native-menu";
jest.mock("@exodus/react-native-menu", () => ({
MenuView: jest.fn((props: MenuComponentProps) => {
const React = require("react");
class MockMenuView extends React.Component {
render() {
return React.createElement(
"View",
{ testID: props.testID },
props.actions.map((action) =>
React.createElement("Button", {
key: action.id,
title: action.title,
onPress: () => {
if (action.id && props?.onPressAction) {
props.onPressAction({ nativeEvent: { event: action.id } });
}
},
testID: action.id,
})
),
this.props.children
);
}
}
return React.createElement(MockMenuView, props);
}),
}));
```
## 捐款
见 [贡献指南](https://npmcn.com/package/%40exodus/react-native-menu/CONTRIBUTING.md) 学习如何为储存库和发展工作流程作出贡献.
## 许可证
麻省理工学院
## 常见问题
### @exodus/react-native-menu 是什么？
反应-内生的UIMenu组件\(仅iOS\)
### 如何安装 @exodus/react-native-menu？
在项目目录运行 npm install @exodus/react-native-menu，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\*）、react-native（\*）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。
### @exodus/react-native-menu 支持 TypeScript 吗？
支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。
### @exodus/react-native-menu 支持 ESM 还是 CommonJS？
同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。
### @exodus/react-native-menu 可以商用吗？
@exodus/react-native-menu 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。
### @exodus/react-native-menu 的下载量有多少？
根据 npm 官方下载统计，@exodus/react-native-menu 在 2026/10/14 – 2026/11/12 这 30 天内被下载 10,395 次，日均约 347 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。
### @exodus/react-native-menu 还在维护吗？
最新版本 2\.0\.0-exodus-5 发布于 2026/01/02（10 个月前）；至今共发布 6 个版本，其中过去 12 个月发布了 2 个；首次发布于 2025/10/29。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。