定制Taro Picker组件

背景

Taro Picker组件默认样式修改比较繁琐，为满足UI规范，利用PickerView和PickerViewColumn组件自定义Picker组件。

实现

Taro提供了PickerView组件，组件参数如下：

组件实现代码如下

jsx:

import React from 'react'import classNames from 'classnames';import { View, PickerView, PickerViewColumn } from '@tarojs/components';import './index.scss'interface PickerProps {  data: any[],  mode: string,  value: any[],  onChange: Function,  close: Function,  confirm: Function,  linkage?: Boolean  confirmText?: string  cancelText?: string  confirmTextColor?: string  cancelTextColor?: string}export default function (props: PickerProps) {  const data = props.data;//数据源  const mode = props.mode//picker样式  const value = props.value  const onChange = props.onChange  const close = props.close  const confirm = props.confirm  const linkage = props.linkage //是否联动  return (    <View className='pickerMask' >      <View className='pickerContent'>        <View className='pickerTop'>          <View className='cancel' onClick={() => close()} style={{ color: props.cancelTextColor ? props.cancelTextColor : '#333' }}>{props.cancelText ? props.cancelText : '取消'}</View>          <View className='confirm' onClick={() => confirm()} style={{ color: props.cancelTextColor ? props.cancelTextColor : '#2173f9' }}>{props.confirmText ? props.confirmText : '完成'}</View>        </View>        {/* 联动选择器 */}        {          linkage && <View className='multiSelector'>            {              data.map((item, index) => {                return <PickerView indicatorStyle='height: 54px;fontWeight:500' className='pickerColumn' onChange={(e) => onChange(e, index)} value={[value[index]]} key={index}><PickerViewColumn >                  {item.map((child, childIndex) => {                    return <View key={childIndex} className={classNames('pickerItem', { currentItem: value[index] == childIndex })} >{child}</View>;                  })}                </PickerViewColumn></PickerView>              })            }          </View>        }        {/* 单列选择器 */}        {          (mode == 'selector' || mode == 'multiSelector') && <PickerView indicatorStyle='height: 54px;fontWeight:500' className='pickerWrap' onChange={(e) => onChange(e)} value={value}>            {              mode == 'selector' && <PickerViewColumn>                {data.map((item, index) => {                  return <View key={index} className={classNames('pickerItem', { currentItem: value[index] == index })} >{item}</View>;                })}              </PickerViewColumn>            }            {              mode == 'multiSelector' && data.map((item, index) => {                return <PickerViewColumn key={index}>                  {item.map((child, childIndex) => {                    return <View key={childIndex                    } className={classNames('pickerItem', { currentItem: value[index] == childIndex })}                    >{child}</View>;                  })}                </PickerViewColumn>              })            }          </PickerView>        }      </View>    </View>  )}

css部分：

.pickerMask {  position: fixed;  left: 0;  top: 0;  right: 0;  bottom: 0;  background: rgba(0, 0, 0, 0.4);  z-index: 10000;  display: flex;  flex-direction: column;  justify-content: flex-end;  .pickerContent {    display: flex;    flex-direction: column;    width: 100%;    background: #fff;    border-radius: 14px 14px 0 0;    .pickerTop {      height: 54px;      border-bottom: solid 1px #ebebeb;      display: flex;      justify-content: space-between;      align-items: center;      font-size: 16px;      font-weight: 500;      color: #333;      padding: 0 15px;      .confirm {        color: #2173f9;      }    }    .multiSelector {      display: flex;      .pickerColumn {        flex: 1;        height: 271px;        .pickerItem {          height: 54px;          display: flex;          align-items: center;          justify-content: center;          font-size: 16px;          font-weight: 400;          color: #333;        }        .currentItem {          font-weight: 500;          color: #333;        }      }    }    .pickerWrap {      height: 271px;      padding: 0 15px;      .pickerItem {        height: 54px;        display: flex;        align-items: center;        justify-content: center;        font-size: 16px;        font-weight: 400;        color: #333;      }      .currentItem {        font-weight: 500;        color: #333;      }    }  }}

使用：

const data = []
<CustomPicker data={data} mode='selector' value={submitInfo.reason} onChange={(e) => { infoChange(e, 'reason') }} close={close} confirm={() => confirm('reason')} />

效果：