飞道科技

飞道科技文档总汇

移动端自定义滚轮选择器

详细示例参照demo-mobile的wheel-picker页面

最新更新

移除 initPosition属性,android和ios统一使用selectedItem属性来设置选中项

一、安装

yarn add --dev @taoqf/react-native-wheel-picker@1.0.4
react-native link @taoqf/react-native-wheel-picker

三、属性

属性 默认值 类型 描述
onItemSelected - function 返回选中项的下标
data - Array<string> 数据源数组
isCyclic false boolean 设置循环滚动
selectedItemTextColor ‘black’ string 滚轮选中项的字体颜色
selectedItemTextSize 16 number 滚轮选中项的字体尺寸
selectedItemTextFontFamily - string 滚轮选中项的字体样式
itemTextColor ‘grey’ string 滚轮每一项的字体颜色
itemTextSize 16 number 滚轮每一项的字体尺寸
itemTextFontFamily - string 滚轮每一项的字体样式
selectedItem 0 number 当前选中项(下标)
indicatorColor ‘black’ string 指示器颜色
hideIndicator - boolean 隐藏指示器
indicatorWidth 1 number 隐藏宽度
backgroundColor ‘transparent’ string 滚路选择器的背景颜色

四、自定义滚轮示例

4.1 tpl.tsx示例

import { WheelPicker } from '@taoqf/react-native-wheel-picker';
import { Modal, Text, View } from 'react-native';


export default function tpl(...){
	return (
		...
		<View style={[s('container'), { backgroundColor: 'white' }]} >
			<WheelPicker
				style={s('dateWheelPicker')}
				data={d('arr')}
				onItemSelected={(i: number) => {
					console.log(i);
				}}
				selectedItem={1}
			/>
			<WheelPicker
				style={s('wheelPicker')}
				isCyclic
				data={['11', '22', '33']}
				onItemSelected={(i: number) => {
					console.log(i);
				}}
				selectedItem={1}
			/>
			<WheelPicker
				style={s('wheelPicker')}
				isCyclic
				data={['21', '22', '23']}
				onItemSelected={(i: number) => {
					console.log(i);
				}}
				selectedItem={1}
			/>

			<WheelPicker
				style={s('wheelPicker')}
				// {...this.props}
				data={['上午', '下午']}
				onItemSelected={(i: number) => {
					console.log(i);
				}}
				selectedItem={1}
			/>
		</View>
	);
}

4.2 styles.ts示例

export default {
	container: {
		alignItems: 'center',
		flexDirection: 'row'
	},
	wheelPicker: {
		height: 150,
		width: null,
		flex: 1
	},
	dateWheelPicker: {
		height: 150,
		width: null,
		flex: 3
	}
};

五、Time Picker控件

TimePicker

属性文档

属性 默认值 类型 描述
…WheelPicker props - - 支持WheelPicker所有的样式属性
initDate 当前时间 Date 初始选中的时间
onTimeSelected - function 时间选择器选中回调
hours [1,2,3,4…] Array<string> 自定义小时数据
minutes [00,05,10,15…] Array<string> 自定义分钟数据
format24 false boolean 设置24小时制

5.1 使用示例

import { TimePicker } from '@taoqf/react-native-wheel-picker';

export default function tpl(...){
	return (
		<TimePicker></TimePicker>
	);
}

六、Date Picker控件 废弃

DatePicker

属性文档

属性 默认值 类型 描述
DatePickerIOS props - - 支持DatePickerIOS组件的所有的样式属性(仅支持ios)
initDate 当前日期 Date 设置初始日期
onDateSelected - function 日期选择器选中回调
days [1,2,3,4…] Array<string> 自定义天数据(仅支持ios)
hours [1,2,3,4…] Array<string> 自定义小时数据(仅支持ios)
minutes [1,2,3,4…] Array<string> 自定义分钟数据(仅支持ios)
days [1,2,3,4…] Array<string> 自定义天数据(仅支持ios)
format24 false boolean 设置24小时制(仅支持android)
startDate 当前日期 Date 设置最小日期(仅支持android)
daysCount 365 numebr 从开始日期起显示多少天(仅支持android)
hideDate false boolean 隐藏天选择器(仅支持android)
hideHours false boolean 隐藏小时选择器(仅支持android)
hideMinutes false boolean 隐藏分钟选择器(仅支持android)
hideAM false boolean 隐藏上下午选择器(仅支持android)

6.1 使用示例

import { DatePicker } from '@taoqf/react-native-wheel-picker';

export default function tpl(...){
	return (
		<DatePicker></DatePicker>
	);
}