Picker组件封装

在开发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文件中修改，传值不同需要在显示的时候进行属性修改。