react-native-ts-wheel-picker

Welcome to the RN sliding selection component, which is already compatible with iOS, Android, and HarmonyOS Next. It is a pure tsx component and does not require native dependency support

Parameter Introduction

interface THWheelPickerProps extends ViewStyle {
  /**
   * wheelHeader参数
   */
  // 点击取消触发的方法
  // Click to cancel the triggering method
  onCancel?: () => void
  // 点击确认触发的方法
  // Click to confirm the triggering method
  onConfirm?: (e: any) => void
  // 标题 title
  title?: string | undefined
  // 返回标题 left title
  leftTitle?: string | undefined
  // 确认标题 rightTitle
  rightTitle?: string | undefined
  // 返回自定义 custom left view
  leftHeaderView?: ReactNode | undefined
  // 确认自定义 custom right view
  rightHeaderView?: ReactNode | undefined
  // 标题自定义 custom title view
  titleHeaderView?: ReactNode | undefined

  /**
   * wheelContainer参数, titleview 和滑动选择中间的部分
   */
  containerView?: ReactNode | Function | undefined
  /**
   * wheelPicker参数
   */
  // 展示 is show ?
  visible: boolean
  // 数据源格式 data Source
  dataSource: Array<THWheelPickerDataSource>
  // 需要展示的行列数 cols
  cols: number
  // line为模拟iOS原生选择的样式，block为两行线的模式
  // Line is a style that simulates iOS native selection, while block is a two line pattern
  lineType?: 'line' | 'block'
  // 默认的数组，例如树形结构想选择某个初始化的值，需要先defaultValue中传入这一组初始化的值
  // A default array, such as a tree structure, to select an initialized value, you need to first pass in this set of initialized values from the defaultValue
  defaultValue?: Array<string>
  // 字体样式
  fontStyle?: StyleProp<TextStyle> | undefined
  // item的高度
  itemHeight?: number | undefined
  // 滚动区域的高度
  wheelHeight?: number | undefined
  // ref
  wheelRef?: Ref<IRefs | undefined>
}

• The above are optional parameters

1. onCancel is Cancel button method
2. onConfirm is Confirm button method
3. title is title view text
4. leftTitle is custom left title text
5. rightTitle is custom right title text
6. leftHeaderView is custom left title view
7. rightHeaderView is custom right title view
8. titleHeaderView is custom main title view
9. containerView The part located in the middle of the title and sliding area, which does not exist if not set
10. visible is show？
11. dataSource Data sources that match label, value, and children
12. cols num cols
13. lineType The type of sliding area mask, where line represents the style of simulating iOS, and block represents the horizontal line style
14. defaultValue Default data requires passing in the default selected value value value
15. itemHeight height of item
16. wheelRef ref of wheel, can get state

<>
  <WheelPicker
    containerView={
      <View
        style={{ height: 40, justifyContent: 'center', alignItems: 'center' }}
      >
        <Text>{'container view'}</Text>
      </View>
    }
    style={{
      position: 'absolute',
      top: '50%',
      width: '100%',
      height: 400,
      borderWidth: 1,
      borderColor: 'red',
    }}
    lineType="block"
    visible={true}
    defaultValue={['a', 'mala']}
    dataSource={[
      { label: 'a', value: 'a', children: [{ label: 'b', value: 'b' }] },
      { label: 'a1', value: 'a1', children: [{ label: 'b1', value: 'b1' }] },
      { label: 'aa', value: 'aa', children: [{ label: 'ba', value: 'ba' }] },
      {
        label: 'aaa',
        value: 'aaaa',
        children: [{ label: 'baa', value: 'baa' }],
      },
      {
        value: 'mala',
        label: 'aaa',
        children: [
          {
            value: 'asda',
            label: 2222,
            children: [{ value: 'a', label: 'b' }],
          },
        ],
      },
    ]}
    cols={1}
  />
</>

1. This is line mode, and the mask color style can be changed. Zoom in to see the color difference in the image
2. use block