移动端自定义滚轮选择器
详细示例参照demo-mobile的wheel-picker页面
最新更新
移除 initPosition属性,android和ios统一使用selectedItem属性来设置选中项
一、安装
yarn add --dev @taoqf/react-native-wheel-picker@1.0.4
二、link
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控件
属性文档
属性 |
默认值 |
类型 |
描述 |
…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控件 废弃
属性文档
属性 |
默认值 |
类型 |
描述 |
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>
);
}