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';
--
``javascript
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()
}
onPress={this.show.bind(this)} underlayColor="transparent">


{listVal}




ref="bankName"
titles={'请选择银行'}
valueChange={this.changBank.bind(this)}
datas={dataBank}
animateType={'fade'}
/>
`
ref="showList"
titles={'我是列表标题'}
valueChange={this.changList.bind(this)}
datas={dataList}
animateType={'fade'}
positionStyle={{backgroundColor:'#ff6600'}}
renderRow={this.defineList.bind(this)}
innersWidth={150}
innersHeight={200}
/>

$3

- '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

$3

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 (
{backgroundColor: evenRow ? '#dfdfdf' : 'white',
alignItems:'center',height:36}]}>
mode='stretch'
source={icon}
/>
highlighted && {color: 'mediumaquamarine'}]}>
{rowData.name}{rowData.age}



);
}