[译]React Native 下拉菜单组件 (react-native-menu)

尊重版权,转载请注明出处

本文来自:江清清的技术专栏-翻译组(www.lcode.org)

翻译计划项目:github.com/jiangqqlmj/…

开源项目地址:github.com/jaysoo/reac…

项目介绍

该为Android和iOS平台下拉菜单组件，该组件效果有点类似于Android的Spinner组件。当前的版本代码API还是非常灵活的，你可以非常简便的进行扩展方法或者属性

刚创建的React Native技术交流2群(496601483)欢迎各位大牛,React Native技术爱好者加入交流!

配置安装

npm install react-native-menu --save

实例效果

ios和android运行效果如下:

基础实例

import React, { View, Text, AppRegistry } from 'react-native';
import Menu, { MenuContext, MenuOptions, MenuOption, MenuTrigger } from 'react-native-menu';

const App = () => (
  // You need to place a MenuContext somewhere in your application, usually at the root.
  // Menus will open within the context, and only one menu can open at a time per context.
  
    
    Hello!
  
);

const TopNavigation = () => (
  
    My App
     alert(`User selected the number ${value}`)}>
      
        ⋮
      
      
        
          One
        
        
          Two
        
      
    
  
);

AppRegistry.registerComponent('Example', () => App);

特别注意:

为了使

能够正常工作,你需要首先在外层挂载渲染节点。该允许打开所有安装在中的菜单，一般情况下该菜单会被移到Context最后的子节点中。

你还必须设置和作为

的子节点，当用户点击的时候进行打开菜单。组件可以添加任何的子功能菜单，但是你必须至少需要设置一个功能让菜单可以正常工作。

点击进入查看使用实例....

API模块

1.MenuContext

方法:

• isMenuOpen() -- Returns true if menu is open    如果菜单打开状态,返回true
• openMenu() -- Opens the menu      打开菜单
• closeMenu() -- Closes the menu       关闭菜单
• toggleMenu() -- Toggle the menu between open and close    打开和关闭菜单开关

   属性无

2.Menu

    属性:

   属性:

• optionsContainerStyle -- 提供自定义样式设置
• renderOptionsContainer --渲染中菜单元素以及承载的该功能的容器View,默认情况下该View为ScrollView

4.MenuOption

属性:

• disabled -- 如果设置为true,那该菜单无法被选中
• style -- 进行设置风格样式，重写默认的样式

测试

1.安装Dev模块

npm install

2.运行单元测试

npm run test:unit

3.运行集成测试

使用这个步骤的时候，需要确保你已经连接了设备，并且通过adb devices可以找到连接的设备

npm run test:integration