滚轮选择器

1. 当data数组的长度小于3时,isCyclic循环滚动将不会生效.
2. 当本列数组中数据重复时,重复数据的选中项下标相同.
3. ios系统原生picker没有循环滚动属性.
4. 如果项目之前在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
}
]