商品信息菜单 – react-native-selector

[weixin_38062424]

Install npm install react-native-selector --save API Props Type Description optionsData PropTypes.array select的数据源 onSelect PropTypes.func 选择事件，函数参数为选择的item selectedOption PropTypes.object 选中的item topStyle PropTypes.any select的样式 placeholder PropTypes.string select默认展示的文本，优先级大于选中的item example /** * Sample React Native App * https://github.com/facebook/react-native */ 'use strict'; import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View } from 'react-native'; import Select from '../index'; const sellStatusOptions = [{name: '全部', value: -1}, {name: '售卖中', value: 0}, {name: '停止售卖', value: 1}]; const stockOptions = [{name: '全部', value: -1}, {name: '单品库存告急', value: 0}, {name: '单品售罄', value: 1}]; class testProject extends Component { constructor(props) { super(props); this.state = { sellStatus: {name: '全部', value: -1}, stockStatus: {name: '全部', value: -1}, sellStatusPlaceHolder: '售卖状态', stockPlaceHolder: '库存状态' }; } _selectSellStatus(item) { this.setState({ sellStatus: item, sellStatusPlaceHolder: '' }); } _selectStockStatus(item) { this.setState({ stockStatus: item, stockPlaceHolder: '' }); } _renderSelect() { let { sellStatus, stockStatus, sellStatusPlaceHolder, stockPlaceHolder } = this.state; return ( <View style={styles.selectWrapper}> <Select ref={view=>{this.sellStatusSelect = view }} optionsData={sellStatusOptions} selectedOption={sellStatus} onSelect={this._selectSellStatus.bind(this)} topStyle={{borderRightWidth: 0}} placeholder={sellStatusPlaceHolder} /> <Select ref={view=>{this.stockSelect = view }} optionsData={stockOptions} selectedOption={stockStatus} onSelect={this._selectStockStatus.bind(this)} placeholder={stockPlaceHolder} /> </View> ); } _onStartShouldSetResponderCapture() { this.sellStatusSelect.close(); this.stockSelect.close(); return false; } render() { return ( <View style={styles.container}> {this._renderSelect()} <View style={{flex: 1}} onStartShouldSetResponderCapture={this._onStartShouldSetResponderCapture.bind(this)}> </View> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, paddingTop: 20, paddingLeft: 10, paddingRight: 10 }, selectWrapper: { flexDirection: 'row' } }); AppRegistry.registerComponent('react-native-select-index', () => testProject); Screenshots