在开发APP的过程中,我们可能会遇上软件中需要有很多下拉选择样式,就像之前我做的那个《房贷计算器》一样,有很多下拉选择,如果没有将Picker封装起来共用是很麻烦的。
安装插件
在React Native里这个组件叫Picker,目前(React Native0.25.1版本)来说,自带的Picker并不能很好的适应iOS和Android,所以在此借助第三方的插件:react-native-picker
安装插件命令:npm install --save react-native-picker
picker组件
该插件有哪些具体的参数与方法查看官方文档:https://github.com/beefe/react-native-picker
在该js文件中,主要是picker的定义;
picker有show()方法,经过某个触发事件后执行,将picker展示出来给用户进行选择
picker展示时,还需要将当前的值和供选择的值都传值过来
export default class PickerModal extends React.Component {
constructor(props) {
super(props);
this.state = {
options: [0],
currentOption: 0
}
}
show(options, currentOption) {
this.setState({options, currentOption});
this.picker.show();
return new Promise(
(resolve, reject)=> {
this.resolve = resolve;
this.reject = reject;
}
);
}
render() {
return (
<Picker
ref={(picker)=>{this.picker = picker;}}
style={{position:'absolute', left:0, right:0, bottom:0, height: 270, backgroundColor:'#fff'}}
showMask={true}
pickerBtnText="确定"
pickerCancelBtnText="取消"
pickerBtnStyle={{color:'#000'}}
pickerData={this.state.options}
selectedValue={[this.state.currentOption]}
onPickerDone={(value)=>{ this.picker.hide(); this.resolve && this.resolve(value[0]); }}
onPickerCancel={()=>{ this.picker.hide(); this.reject && this.reject(); }}
/>
)
}
}
picker-field组件
该js是 通过接受值来设计样式显示在页面上,当点击后,即可将上述的picker组件展示出来给用户选择;
export default class PickerField extends React.Component {
showPickerModal() {
let { options, value } = this.props;
global.pickerModal.show(options, value).then(
(newValue)=> {
this.props.onValueChange(newValue);
},
(e)=> {
console.log(e)
}
)
}
render() {
let { title, value } = this.props;
return (
<View style={{flex:1}}>
<View
style={{flexDirection:'row', alignItems:'center', height:47, borderBottomWidth:1, borderBottomColor:'#2b3138'}}>
<Text style={{flex:2, fontSize:16, color:'#c9c8c9'}}>{title}</Text>
<TouchableOpacity style={{flexDirection:'row', flex:2.1, alignItems:'center'}}
onPress={()=>this.showPickerModal()}>
<Text style={{color:'#50c0ce', fontSize:16}}>{value}</Text>
<Text style={{flex:1, textAlign:'right'}}>
<Icon style={{color:'#c9c8c9'}} name="ios-arrow-down" size={26}/>
</Text>
</TouchableOpacity>
</View>
</View>
)
}
}
在文件中有一个global.pickerModal,这个是需要我们在一个外层文件或公共文件中定义的:
<PickerModal ref={(pickerModal)=>{global.pickerModal = pickerModal;}}/>
给picker-field组件传值
在需要的位置中将PickerField显示出来:
<PickerField title="计算方式" value={this.state.calMethod}
onValueChange={(value)=>this.setState({calMethod:value})}
options={['贷款金额','住房面积']}/>
具体的显示样式可以在picker-field组件那个js文件中修改,传值不同需要在显示的时候进行属性修改。