react-native-select-dialog
Version:
a demo for react-native-select-dialog component
107 lines (99 loc) • 3.78 kB
Markdown
# 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()
}
<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>
);
}