react-naitve 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展示时，还需要将当前的值和供选择的值都传值过来

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40

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组件展示出来给用户选择；

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37

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，这个是需要我们在一个外层文件或公共文件中定义的：

1	<PickerModal ref={(pickerModal)=>{global.pickerModal = pickerModal;}}/>

给picker-field组件传值

在需要的位置中将PickerField显示出来：

1 2 3

<PickerField title= "计算方式"  value={ this .state.calMethod}               onValueChange={(value)=> this .setState({calMethod:value})}               options={[ '贷款金额' , '住房面积' ]}/>

具体的显示样式可以在picker-field组件那个js文件中修改，传值不同需要在显示的时候进行属性修改。