hcmobile-sdk/components/modalDropdown/ModalDropdownDemo.js

mobile-sdk

//import liraries
import React, { Component } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import ModalDropdown from './ModalDropdown';
import Button from '../button/index';

let options =  ['已预约','已确认','服务中','待付款','已完成',];

// create a component
class ModalDropdownDemo extends Component {

    constructor(props) {
        super(props);
        this.state = {
            title:'请选择',
            dropDownOpen:false,
        };
    }
    
    render() {
        return (
            <View style={styles.container}>
                <View 
                    style = {{
                        flexDirection:'row',
                        borderColor:'blue',
                        borderWidth:1,
                        height:48,
                        alignItems:'center',
                        justifyContent:'center',
                        borderRadius:5,
                        width:185
                    }}
                >
                    <ModalDropdown 
                        ref = {(ref) => this.dropDown = ref}
                        animationType = 'none'
                        options={options}
                        style = {{width:185,}}
                        defaultValue = {this.state.title}
                        animated = {true}
                        textStyle = {{color:'blue',fontSize:16,textAlign: 'center'}}
                        dropdownStyle = {{height:150,width:185,paddingTop:10}}
                        dropdownTextStyle = {{fontSize:14,textAlign:'center'}}
                        onSelect = {(index) => this.select(index)}
                        onDropdownWillShow = {() => {this.setState({dropDownOpen:true});}}
                        onDropdownWillHide = {() => {this.setState({dropDownOpen:false});}}
                    />
                </View>
            </View>
        );
    }

    select(index){
        this.setState({
            title:options[index],
        });
        console.log(options[index]);
    }
}

// define your styles
const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'white',
    },
});

//make this component available to the app
export default ModalDropdownDemo;