滚轮选择器
- 当data数组的长度小于3时,isCyclic循环滚动将不会生效.
- 当本列数组中数据重复时,重复数据的选中项下标相同.
- ios系统原生picker没有循环滚动属性.
- 如果项目之前在package.json里的导入了@taoqf/react-native-wheel-picker版本需删除,删除node_models并重装依赖.不会对项目代码造成影响.
一、安装
yarn add --dev @dfeidao/fd-m000025
二、属性
属性|描述 --|--|--|-- onItemSelected|返回所有列选中项的下标 data|数据源数组 selectedItem|初始化选中项默认为第一个,传具体的字符串 style|选择器css样式 visible|模态框是否显示 title|模态框标题 isCyclic|设置循环滚动,ios不支持该属性 selectedItemTextColor|滚轮选中项的字体颜色,ios不支持 selectedItemTextSize|滚轮选中项的字体尺寸,ios不支持 selectedItemTextFontFamily|滚轮选中项的字体样式,ios不支持 itemTextColor|滚轮每一项的字体颜色 itemTextSize|滚轮每一项的字体尺寸 itemTextFontFamily|滚轮每一项的字体样式 indicatorColor|指示器颜色 hideIndicator|隐藏指示器 indicatorWidth|隐藏宽度 backgroundColor|滚路选择器的背景颜色
三、滚轮选择器示例
3.1 tpl.tsx示例1
import M025 from '@dfeidao/fd-m000025';
import { Text, View } from 'react-native';
export default function tpl(...){
return (
<View>
{/* <Text onPress={(() => {
this.setState({
show:true
});
})}> */}
<Text onPress={a('a002')}>点击</Text>
<M025
title={'滚轮选择器'}
{/* (() => {
this.setState({
show:false
});
})*/}
onCancel={a('a003')}
visible={d('show')}
data={[['0','1','2'], ['a','b','c'], ['33','22','11']]}
onItemSelected={((result) => {
console.log(result);
})}
selectedItem={['0', 'b', '11']}
/>
</View>
);
}
3.2 tpl.tsx示例2
当使用d('data')方式传递数据时需要如下做判断.
import M025 from '@dfeidao/fd-m000025';
import { Text, View } from 'react-native';
export default function tpl(...){
return (
<View>
{/* <Text onPress={(() => {
this.setState({
show:true
});
})}> */}
<Text onPress={a('a002')}>点击</Text>
{(() => {
if (d('data')) {
return (
<M025
title={'滚轮选择器'}
onCancel={a('a003')}
visible={d('show')}
data={d('data')}
onItemSelected={((result) => {
console.log(result);
})}
selectedItem={['0', 'b', '11']}
/>
);
}
})()}
</View>
);
}
result
onItemSelected回调返回值
属性|描述 --|--|--|-- extra|用户当前的选中项的数据 name|当前选中项的名称 index|当前选中项的下标 row|当前选中项,选择器的列
[
{
"extra": {
"name": "0", "index": 0
},
"index": 0,
"row": 0
},
{
"extra": {
"name": "b", "index": 1
},
"index": 0,
"row": 1
},
{
"extra": {
"name": "11", "index": 2
},
"index": 0,
"row": 2
}
]