From c25e97d92e34f8d36562f073422604d7c3492515 Mon Sep 17 00:00:00 2001 From: zogpap Date: Mon, 15 Jul 2024 19:26:24 +0800 Subject: [PATCH] =?UTF-8?q?docs:=20=E6=96=B0=E5=A2=9Ereact-native-material?= =?UTF-8?q?-menu=E6=8C=87=E5=AF=BC=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- zh-cn/react-native-material-menu.md | 131 ++++++++++++++++++++++++++++ 1 file changed, 131 insertions(+) create mode 100644 zh-cn/react-native-material-menu.md diff --git a/zh-cn/react-native-material-menu.md b/zh-cn/react-native-material-menu.md new file mode 100644 index 00000000..43f92f79 --- /dev/null +++ b/zh-cn/react-native-material-menu.md @@ -0,0 +1,131 @@ + +模板版本:v0.2.2 + +

+

react-native-material-menu +

+

+ +

+ + Supported platforms + + + License + +

+ + +> [!TIP] [Github 地址](https://github.com/mxck/react-native-material-menu) + + +## 安装与使用 + + + +#### **npm** + +```bash +npm install react-native-material-menu@2.0.0 +``` + +#### **yarn** + +```bash +yarn add react-native-material-menu@2.0.0 +``` + + + +下面的代码展示了这个库的基本使用场景: + +> [!WARNING] 使用时 import 的库名不变。 + + +```js +import React, { useState } from 'react'; + +import { View, Text } from 'react-native'; +import { Menu, MenuItem, MenuDivider } from 'react-native-material-menu'; + +export default function App() { + const [visible, setVisible] = useState(false); + + const hideMenu = () => setVisible(false); + + const showMenu = () => setVisible(true); + + return ( + + Show menu} + onRequestClose={hideMenu} + > + Menu item 1 + Menu item 2 + Disabled item + + Menu item 4 + + + ); +} + + +``` + +## Link + +目前 HarmonyOS 暂不支持 AutoLink,所以 Link 步骤需要手动配置。 + +首先需要使用 DevEco Studio 打开项目里的 HarmonyOS 工程 `harmony` + +## 约束与限制 +### 兼容性 + +本文档内容基于以下版本验证通过: + +RNOH:0.72.27; SDK:HarmonyOS NEXT Developer Beta1; IDE:DevEco Studio 5.0.3.400SP7; ROM:3.0.0.25; + + +## 属性 + +> [!TIP] "Platform"列表示该属性在原三方库上支持的平台。 + +> [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性;no 则表示不支持;partially 表示部分支持。使用方法跨平台一致,效果对标 iOS 或 Android 的效果。 + +### Menu + +| props | Description | Type | Required | Platform | HarmonyOS Support | +| ---- | ----------- | ---- | -------- | ---- | ------------ | +| children | Components rendered in menu (required) | ReactNode | yes | all | yes| +| anchor | Button component (required) | ReactNode | yes | all | yes| +| visible | Whether the Menu is currently visible | Boolean | no | all | yes| +| style | Menu style. | [ViewStyle](https://reactnative.dev/docs/view-style-props) | no | all | yes| +| onRequestClose | Callback when menu has become hidden | () => void | no | all | yes| +| animationDuration | Changes show/hide animation duration.default is 300 | Number | no | all | yes| + + +### MenuItem + +| props | Description | Type | Required | Platform | HarmonyOS Support | +| ---- | ----------- | ---- | -------- | ---- | ------------ | +| children | Rendered children (required) | ReactNode | yes | all | yes| +| disabled | Disabled flag.default is false. | Boolean | no | all | yes| +| disabledTextColor | Disabled text color.default is #bdbdbd. | String | no | all | yes| +| onPress | Called function on press | ()=>void | no | all | yes| +| style | Container style | [ViewStyle](https://reactnative.dev/docs/view-style-props) | no | all | yes| +| textStyle | Text style | [TextStyle](https://reactnative.dev/docs/text-style-props) | no | all | yes| +| pressColor | Pressed color.default is #e0e0e0. | String | no | all | yes| + + +## 遗留问题 + +## 其他 + +## 开源协议 + +本项目基于 [The MIT License (MIT)](https://github.com/mxck/react-native-material-menu/blob/master/LICENSE) ,请自由地享受和参与开源。 + + \ No newline at end of file -- Gitee