如何使用 Material Design 在 react-native 中添加菜单？
React native 是 Facebook 开发的一个框架，用于在一种通用语言 JavaScript 下为 iOS 和 Android 创建原生风格的应用程序。最初，Facebook 只开发了 React Native 来支持 iOS。但是，由于最近支持 Android 操作系统，该库现在可以为这两个平台呈现移动 UI。
先决条件：
- reactjs的基础知识。
- 具有 ES6 语法的 Html、css 和 javascript。
- NodeJs 应该安装在您的系统中（安装）。
- Jdk 和 android studio 用于在模拟器上测试您的应用程序（安装）。
方法：在本文中，我们将看到如何在 react-native 中创建菜单。要创建菜单，我们将使用材料设计库，即react-native-paper。菜单包含临时出现的选项列表。在我们的项目中，我们将创建一个按钮，单击该按钮，将出现菜单。我们将分步实施。
下面是分步实现：
第 1 步：使用以下命令在 react-native 中创建一个项目：
npx react-native init DemoProject第 2 步：使用以下命令安装 react-native paper：
npm install react-native-paper第 3 步：在您的项目中创建一个组件文件夹。在 components 文件夹中创建一个文件 Menu.js
项目结构：它看起来像这样。
实现：在各自的文件中写下代码。
在 Menu.js 中，我们直接从react-native-paper库中导入了菜单项。它使用以下道具：
- 可见：显示或隐藏菜单需要它的道具。
- 锚点：要打开菜单，需要锚点。 In 可以是按钮、文本、标签、图像等。
- onDismiss：当 Menu 被关闭时调用的回调函数。调用时需要更新可见道具。
Menu.js
import React, { useState } from 'react';
import { View, StyleSheet, Alert } from 'react-native';
import { Button, Menu, Provider } from 'react-native-paper';
const MenuExample = () => {
const [visible, setVisible] = useState(false);
const closeMenu = () => setVisible(false);
const openMenu = (v) => setVisible(true);
return (
);
};
export default MenuExample;
const styles = StyleSheet.create({
container: {
padding: 50,
flexDirection: 'row',
justifyContent: 'center',
height: 200,
},
});App.js
import React from 'react';
import type { Node } from 'react';
import { View } from 'react-native';
import MenuExample from './components/Menu';
const App: () => Node = () => {
return (
);
};
export default App;应用程序.js
import React from 'react';
import type { Node } from 'react';
import { View } from 'react-native';
import MenuExample from './components/Menu';
const App: () => Node = () => {
return (
);
};
export default App;
运行应用程序的步骤：使用以下命令运行应用程序：
npx react-native run-android输出：
