react-native-dropdown-button

#react-native-menu-button dropdown menu button for react native

1.0.0 版本更新

fixed issue https://github.com/KenHky/react-native-menu-button/issues/4

解决了转屏后menu计算位置不对的问题。

重构了一些代码，语法更符合规范, 请使用 0.25+ 版本的react native。

api 没有变化。

简介

这是一个 react-native 的 menubutton 组件,支持 iOS 和 android,但是安卓的样式和 iOS 的有一些差异。

iOS	Android

API

buttonStyle：按钮的样式，可覆盖默认样式。

optionsStyle：menu 组的样式，可覆盖默认的样式。

menuGroup：menu 数据，格式为[{key:num or str,value:num or str,text:str,hide:Boolean}]。value 为点击发生后传的值，text 为显示的字符串，hide 为 true 时隐藏该条数据，默认为 false。

onSelect：选择一个选项后的回调，参数为 menu 数据的 value 值。

button：可定制按钮，默认为{(<Text style={{ fontSize: 20,textAlign:"right" }}>⋮)} (0.1.0新增)。

optionStyle: menu items style，每个 menu item 的样式。(0.2.0新增)

selectedOptionStyle: menu item style when selected，选择后的 item 样式，默认无。(0.2.0新增)

optionTextStyle: menu item text style ，每个 menu item text 的样式，默认无。(0.3.0新增)

selectedOptionTextStyle: menu item text style when selected，选择后的 item text 的样式，默认无。(0.3.0新增)

demo

cd demo
npm install
react-native run-android
react-native run-ios

安装

npm install react-native-menu-button ——save

###使用

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';
import MenuButton from 'react-native-menu-button'

export default class rndemo extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selectData:""
    };
  }
  _handleOnSelect (value) {
    this.setState({selectData:value})
  }
  render() {
    menuGroup= [
      {key:"0",value:"menu1",text:"menu1"},
      {key:"1",value:"menu2",text:"menu2"},
      {key:"2",value:"菜单3",text:"菜单3"},
      {key:"3",value:"菜单4",text:"菜单4"},
    ]
    return (
      <View>
        <View style={styles.top}>
          <MenuButton  
            buttonStyle={[styles.rightButton]} 
            menuGroup={menuGroup}
            onSelect={this._handleOnSelect.bind(this)} 
            optionSelectedStyle={{backgroundColor:"red"}}
          />
        </View>
        <Text style={styles.text}>{`select ${this.state.selectData}`}</Text>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  top:{
    backgroundColor: '#FFFFFF',
    paddingTop: 20,
    top: 0,
    height: 64,
    right: 0,
    left: 0,
    borderBottomWidth: 0.5,
    borderBottomColor: '#828287',
    position: 'relative',
  },
  text:{
    marginTop:20,
  },
  rightButton: {
    width: 100,
    height: 37,
    position: 'absolute',
    bottom: 8,
    right: 2,
    padding: 8
  },
})

AppRegistry.registerComponent('rndemo', () => rndemo)

###协议 MIT