react-native-ts-wheel-picker
v2.0.1
Published
a sliding(wheel) picker built purely in JavaScript(use ts) that can be applied to iOS,Android and HarmonyOS platforms
Downloads
20
Maintainers
Readme
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
- onCancel is Cancel button method
- onConfirm is Confirm button method
- title is title view text
- leftTitle is custom left title text
- rightTitle is custom right title text
- leftHeaderView is custom left title view
- rightHeaderView is custom right title view
- titleHeaderView is custom main title view
- containerView The part located in the middle of the title and sliding area, which does not exist if not set
- visible is show?
- dataSource Data sources that match label, value, and children
- cols num cols
- lineType The type of sliding area mask, where line represents the style of simulating iOS, and block represents the horizontal line style
- defaultValue Default data requires passing in the default selected value value value
- itemHeight height of item
- 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}
/>
</>