@ exodus/ react- native-菜单
iOS14+UIMenu组件用于反应-内生. 倒回ActionSheet为iOS14下方的版本.
| iOS 14+ (英语) | iOS 13 |
|---|---|
 |  |
安装
通过 npm :
npm install @exodus/react-native-menu
通过线条 :
yarn add @exodus/react-native-menu
在 iOS 上安装 React 原生 0.63 及以上
有一个问题(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。 。 。 .
链接
软件包是 自动链接 当建立应用程序。 你只需要做点什么:
npx pod-install
使用量
import { MenuView, MenuComponentRef } from "@exodus/react-native-menu";
const App = () => {
const menuRef = useRef < MenuComponentRef > null;
return (
<View style={styles.container}>
<MenuView
ref={menuRef}
title="Menu Title"
onPressAction={({ nativeEvent }) => {
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}
>
<View style={styles.button}>
<Text style={styles.buttonText}>Test</Text>
</View>
</MenuView>
</View>
);
};
申报用途
也有可能获得 action 是一种反应性更强的,宣示性的时尚. 参见 react-to-imperative 软件包,并查看示例 这里。 。 。 .
参考文献
道具
title (仅iOS)
菜单的标题.
| 类型 | 需求 |
|---|---|
| 字符串 | 对 |
shouldOpenOnLongPress
布尔决定菜单是否在长时间后或正常情况下打开
| 类型 | 需求 |
|---|---|
| 布尔 | 没有 |
actions
菜单中要显示的动作 .
| 类型 | 需求 |
|---|---|
| 菜单动作 [] | 对 |
themeVariant (仅iOS)
取消菜单主题的字符串 。 如果你想在你的应用程序上 普遍控制主题, 参见此软件包。 。 。 .
| 类型 | 需求 |
|---|---|
| enum ("光","暗") | 没有 |
MenuAction
代表菜单动作的对象 .
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
表示动作样式的属性 .
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
行动状态.
/**
* 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
打开菜单时会调用的回调函数 。 此事件在菜单显示前即刻起火 .
| 类型 | 需求 |
|---|---|
| () 无效 | 没有 |
示例用法:
<MenuView
onOpenMenu={() => {
console.log("Menu was opened");
}}
onCloseMenu={() => {
console.log("Menu was closed");
}}
>
<View>
<Text>Open Menu</Text>
</View>
</MenuView>
用 Jest 进行测试
在某些情况下,您可能想要嘲笑包来测试您的组件. 您可以使用 jest.mock 函数.
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);
}),
}));
捐款
见 贡献指南 学习如何为储存库和发展工作流程作出贡献.
许可证
麻省理工学院