📌  相关文章
📜  如何使用 Material Design 在 react-native 中添加菜单?

📅  最后修改于: 2022-05-13 01:56:13.840000             🧑  作者: Mango

如何使用 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 (
    
      
        
              Show menu
            
          }>
           {
              Alert.alert('Action : ', 'Print');
            }}
            title="Print"
          />
           {
              Alert.alert('Action : ', 'Forward');
            }}
            title="Forward"
          />
           {
              Alert.alert('Action : ', 'Backward');
            }}
            title="Backward"
          />
           {
              Alert.alert('Action :', 'Save');
            }}
            title="Save"
          />
        
      
    
  );
};
  
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

输出: