QQ登录

只需一步,快速开始

微信登录

扫一扫,访问微社区

乐分享

查看: 1003|回复: 0

React-native下拉菜单组件 - react-native-modal-dropdown

[复制链接]

175

主题

309

帖子

3449

积分

超级版主

Rank: 8Rank: 8

积分
3449
发表于 2017-10-15 18:59:51 | 显示全部楼层 |阅读模式


项目地址:https://github.com/sohobloo/react-native-modal-dropdown

使用案例

        import React, { Component } from 'react';
        import { 。。。 } from 'react-native';

        import ModalDropdown from 'react-native-modal-dropdown'
        。。。。

        const isIos = Platform.OS === 'ios';

        export default class MinePayment extends Component {

                constructor(props) {
                        super(props);
                        this.state = {
                                serviceList: [],
                                selectedValue: '',
                                selectedValueId: '',
                        }
                        this.dataRepository = new DataRepository();
                }

                componentDidMount(){
                        this._loadServicesList();
                }

                _loadServicesList(){
                        this.dataRepository.fetchNetRepository(webApi.serviceListPay)
                                .then((result) => {
                                        this.setState({
                                                serviceList: result.data.list
                                        });
                                })
                                .catch((error)=>{
                                        Alert.alert(error);
                                })
                }

                renderRow(rowData) {
                        return (
                                <View style = {styles.dropdownRow}>
                                        <Text style = {styles.dropdownRowText}>{rowData.title}</Text>
                                </View>
                        );
                }

                onSelect(index, value) {
                        this.setState({
                                selectedValue: value.title, //框中要显示的值
                                selectedValueId: value.id
                        });
                }

                render() {
                        let serviceList = this.state.serviceList;
                        let navigationBar = <NavigationBar
                                                                        title = '支付'
                                                                        leftButton={ViewUtils.getLeftButton(()=>this.onBack())}
                                                                />;
                        return (
                                <View style={styles.container}>
                                        <ModalDropdown
                                                style = {styles.selectView}
                                                textStyle = {styles.textStyle}
                                                dropdownStyle = {styles.dropdownStyle}
                                                defaultValue = { '请选择消费项目'}
                                                renderRow = {this.renderRow.bind(this)}
                                                options = {serviceList}
                                                buttonText = {this.state.selectedValue}
                                                onSelect = {this.onSelect.bind(this)}/>
                                </View>
                        );
                }

        }

        const styles = StyleSheet.create({
                container: {
                        flex: 1,
                        backgroundColor: '#f2f2f2',
                },
                selectView: {
                        width: 150,
                        height: 50,
                        borderWidth: 0,
                        borderRadius: 3,
                        alignSelf: 'flex-end',
                        justifyContent: 'center',
                },
                textStyle: {
                        fontSize: 18,
                        textAlign: 'center',
                        textAlignVertical: 'center',
                },
                dropdownStyle: {
                        width: 150,
                },
                dropdownRow: {
                        height: 40,
                        alignItems: 'center',
                        justifyContent: 'center',
                },
                dropdownRowText: {
                        fontSize: 16,
                        textAlignVertical: 'center',
                },
        });


注: 使用该案例需修改ModalDropdown.js源码文件:

                static propTypes = {
                        //......
                        buttonText: PropTypes.string //添加
                };

                //......
                _renderButton() {
                        return (
                                。。。。
                                {/*源码是this.state.buttonText*/}
                                {this.props.buttonText ? this.props.buttonText : this.state.buttonText}
                                。。。。
                        );
                }

一场繁花似锦的梦!
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|小黑屋| 乐分享

GMT+8, 2019-5-20 22:37 , Processed in 0.098663 second(s), 20 queries .

快速回复 返回顶部 返回列表