react-native-select-dialog

react-native-zDialog-List

• A react-native picker/selector component for both Android & iOS.

Features

• Pure JS.
• Compatible with both iOS and Android.
• Highly customizable.(You can change the style you want)
• Controllable with API by code. (show/hide/valueChange)
• Flexible change of content

Usage

Import this module: --javascript import SelectDialog from 'react-native-zDialogList';

     var dataBank=[
       {txt:'中国工商银行',id:'option1'},
       {txt:'中国建设银行',id:'option2'},
       {txt:'中国银行',id:'option3'},
       {txt:'交通银行',id:'option4'},
       {txt:'招商银行',id:'option5'},
       {txt:'中国邮政储蓄银行',id:'option6'},
       {txt:'中国光大银行',id:'option7'},
       {txt:'中国民生银行',id:'option8'},
       {txt:'平安银行',id:'option9'},
       {txt:'浦发银行',id:'option10'},
       {txt:'中信银行',id:'option11'},
       {txt:'兴业银行',id:'option12'},
     ]
     changBank(item,index){
      this.setState({mess:item.txt,index:item.id,valChange:true})	  
       }
     show(){
        this.refs.bankName.show()
      }
      <TouchableHighlight style={[styles.borderGray,styles.borderRadius3,{flexDirection:'row',height:32,margin:20}]}  
                 onPress={this.show.bind(this)}   underlayColor="transparent">
         <View style={[styles.flexRow,styles.flex1,styles.Acenter]}>
                <Text style={[styles.flex1,{fontSize:14,paddingLeft:10}]}>
                   {listVal}
                 </Text>
                 <Image style={{width:18,height:18}} source={require('./product/imgs/Arrow.png')} />
              </View>
            </TouchableHighlight>
      <SelectDialog 
            ref="bankName" 
              titles={'请选择银行'} 
              valueChange={this.changBank.bind(this)} 
              datas={dataBank}
        animateType={'fade'}			  
           />

<SelectDialog 
ref="showList" 
titles={'我是列表标题'} 
valueChange={this.changList.bind(this)} 
datas={dataList}
animateType={'fade'}
positionStyle={{backgroundColor:'#ff6600'}}	
renderRow={this.defineList.bind(this)}
innersWidth={150}
innersHeight={200}					  
 />

Customization

• 'animateType': Change pop up block display animation ('fade','normal','slide') - The animationType prop controls how the modal animates. - slide: slides in from the bottom -fade: fades into view -none: appears without an animation

• 'positionStyle': Change the style of the pop-up block header

• 'renderRow': Custom middle content

• 'innersWidth': Change the width of the pop-up block

• 'innersHeight':Change the height of the pop-up block

Methods

Method	Description
show()	Show the pop-up block （ use the react-native Modal component to always be at the top）
hide()	Hide the pop-up block

props

valueChange     | 'valueChange={this.changBank.bind(this)}' Returns the currently selected object and index renderRow | 'renderRow={this.defineList.bind(this)}'

           defineList(rowData,rowID,highlighted) {//object,index,selected:boolen
            let icon = highlighted ? require('./images/selected.png') : require('./images/select.png');
            let evenRow = rowID % 2;
            return (
            <View style={[styles.flexRow,
                {backgroundColor: evenRow ? '#dfdfdf' : 'white',
                    alignItems:'center',height:36}]}>
                <Image style={{width:18,height:18,marginLeft:10,marginRight:10}}
                 mode='stretch'
                 source={icon}
                />
                <Text style={[styles.listTxt, 
                    highlighted && {color: 'mediumaquamarine'}]}>
                    {rowData.name}{rowData.age}
                </Text>
            </View>

            );
          }