@dfeidao/fd-m000024 v4.6.201909291817

联动滚轮选择器

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

一、安装

yarn add --dev @dfeidao/fd-m000024

二、属性

三、滚轮选择器示例

3.1 tpl.tsx示例1

data数据里的id_field,text_field,pid_field值需要与其属性保持一致.

import M024 from '@dfeidao/fd-m000024';
import { Text, View } from 'react-native';

export default function tpl(...){
	return (
	<View>
			{/* <Text onPress={(() => {
				this.setState({
					show:true
				});
			})}> */}
			<Text onPress={a('a002')}>点击</Text> 
			<M024
				title={'滚轮选择器'}
				{/* (() => {
					this.setState({
						show:false
					});
				})*/}
				onCancel={a('a003')}
				visible={d('show')}
				id_field={'no1'}
				text_field={'name1'}
				pid_field={'parent1'}
				data={[
					{ no1: '1', parent1: 'root', name1: 'AAAA' }, { no1: '8', parent1: 'root', name1: '&&&&' }, 
					{ no1: '2', parent1: '0', name1: 'BBBB' }, { no1: '11', parent1: '1', name1: 'CCCC' }, 
					{ no1: '12', parent1: '1', name1: 'DDDD' }, { no1: '111', parent1: '11', name1: 'EEEE' }, 
					{ no1: '112', parent1: '11', name1: 'FFFF' },{ no1: '1231', parent1: '112', name1: 'FFFF1' },
					{ no1: '111231232', parent1: '112', name1: 'FFFF2' },{ no1: '1131', parent1: '12', name1: 'GGGG1' }, 
					{ no1: '12313', parent1: '12', name1: 'GGG33' },{ no1: '113', parent1: '8', name1: 'GGG44' }, { no1: '114', parent1: '8', name1: 'GGGG2' }, 
					{ no1: '115', parent1: '8', name1: 'GGGG3' }, { no1: '116', parent1: '8', name1: 'GGGG4' }, { no1: '117', parent1: '113', name1: 'GGGG5' }, 
					{ no1: '12313', parent1: '117', name1: 'GGGG51' }, { no1: '1313', parent1: '117', name1: 'GGGG52' }
				]}
				onItemSelected={(result) => {
					console.log('==result==: ', result);
				}}
				selectedItem={['&&&&', 'GGG44', 'GGGG5']}
			/>
		</View>
	);
}

3.2 tpl.tsx示例2

当使用d('data')方式传参时需要如下做判断.

import M024 from '@dfeidao/fd-m000024';
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 (
            			<M024
							title={'滚轮选择器'}
							{/* (() => {
								this.setState({
									show:false
								});
							})*/}
							onCancel={a('a003')}
							visible={d('show')}
							id_field={'no1'}
							text_field={'name1'}
							pid_field={'parent1'}
							data={d('data')}
							onItemSelected={(result) => {
								console.log('==result==: ', result);
							}}
							selectedItem={['&&&&', 'GGG44', 'GGGG5']}
			/>
          					);
						}
      			})()}
		</View>
	);
}

result

onItemSelected回调返回值

[
	{
	"extra": {
		"no1": "1", "parent1": "root", "name1": "AAAA", "index": 0
	},
	"index": 0,
		"row": 0
},
{
	"extra": {
		"no1": "11", "parent1": "1", "name1": "CCCC", "index": 0
	},
	"index": 0,
	    "row": 1
},
{
	"extra": {
		"no1": "111", "parent1": "11", "name1": "EEEE", "index": 0
	},
	"index": 0,
		"row": 2
},
{
	"extra": {
		"no1": "1231", "parent1": "112", "name1": "FFFF1", "index": 0
	},
	"index": 0,
		"row": 3
}
]