react-native-material-dropdown

> 前端框架

开源

材料下拉菜单在 iOS 和 Android 上具有一致的行为

764 stars0 点赞0 次浏览

访问官网 GitHub

工具介绍

材料下拉菜单在 iOS 和 Android 上具有一致的行为

react-native-material-dropdown

Material dropdown with consistent behaviour on iOS and Android

example

Features

Easy to use
Consistent look and feel on iOS and Android
Customizable font size, colors and animation duration
Dynamic dropdown size and position
Configurable visible item count
RTL support
Pure javascript implementation

Installation

bash

npm install --save react-native-material-dropdown

Usage

javascript

import React, { Component } from 'react';
import { Dropdown } from 'react-native-material-dropdown';

class Example extends Component {
  render() {
    let data = [{
      value: 'Banana',
    }, {
      value: 'Mango',
    }, {
      value: 'Pear',
    }];

    return (
      
    );
  }
}

Properties

name	description	type	default
label	Text field label text	String	-
error	Text field error text	String	-
animationDuration	Text field animation duration in ms	Number	225
fontSize	Text field font size	Number	16
labelFontSize	Text field label font size	Number	12
baseColor	Text field base color	String	rgba(0, 0, 0, .38)
textColor	Text field text color	String	rgba(0, 0, 0, .87)
itemColor	Dropdown item text color (inactive item)	String	rgba(0, 0, 0, .54)
selectedItemColor	Dropdown item text color (active item)	String	rgba(0, 0, 0, .87)
disabledItemColor	Dropdown item text color (disabled item)	String	rgba(0, 0, 0, .38)
dropdownPosition	Dropdown position (dynamic if undefined)	Number	-
itemCount	Dropdown visible item count	Number	4
itemPadding	Dropdown item vertical padding	Number	8
itemTextStyle	Dropdown item text styles	Object	-
dropdownOffset	Dropdown offset	Object	{ top: 32, left: 0 }
dropdownMargins	Dropdown margins	Object	{ min: 8, max: 16 }
data	Dropdown item data	Array	[]
value	Selected value	String	-
containerStyle	Styles for container view	Object	-
overlayStyle	Styles for overlay view	Object	-
pickerStyle	Styles for item picker view	Object	-
shadeOpacity	Shade opacity for dropdown items	Number	0.12
rippleOpacity	Opacity for ripple effect	Number	0.54
rippleInsets	Insets for ripple on base component	Object	{ top: 16, bottom: -8 }
rippleCentered	Ripple on base component should be centered	Boolean	false
renderBase	Render base component	Function	-
renderAccessory	Render text field accessory	Function	-
valueExtractor	Extract value from item (args: item, index)	Function	({ value }) => value
labelExtractor	Extract label from item (args: item, index)	Function	({ label }) => label
propsExtractor	Extract props from item (args: item, index)	Function	() => null
onChangeText	Selection callback (args: value, index, data)	Function	-

Other TextField, TextInput and TouchableWithoutFeedback properties will also work

Methods

name	description	returns
focus()	Acquire focus (open dropdown)	-
blur()	Release focus (close dropdown)	-
value()	Get current value	String
selectedIndex()	Get selected index	Number
selectedItem()	Get selected item	Object
isFocused()	Get current focus state	Boolean

Example

bash

git clone https://github.com/n4kz/react-native-material-dropdown
cd react-native-material-dropdown/example
npm install
npm run ios # or npm run android