@dfeidao/fd-m000025 v4.6.201909291817

滚轮选择器

1. 当data数组的长度小于3时,isCyclic循环滚动将不会生效.
2. 当本列数组中数据重复时,重复数据的选中项下标相同.
3. ios系统原生picker没有循环滚动属性.
4. 如果项目之前在package.json里的导入了@taoqf/react-native-wheel-picker版本需删除,删除node_models并重装依赖.不会对项目代码造成影响.

一、安装

yarn add --dev @dfeidao/fd-m000025

二、属性

三、滚轮选择器示例

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": "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
}
]