react-native-picker实现三级联动

首先参考开源项目地址：https://github.com/beefe/react-native-picker

代码如下：

import Picker from 'react-native-picker'

//构造数据

_createDateData=() =>{

let dataArray=[];

for( let i= 0;i< 100;i++){

let secondArray=[]

for( let j= 0;j< 20;j++){

let threeArray=[];

for( let k= 0;k< 30;k++){

threeArray.push( '第三层'+k);

}

let three={};

three[ "第二层"+j]=threeArray;

secondArray.push(three)

}

let second={};

second[ "one"+i]=secondArray

dataArray.push(second)

}

return dataArray;

}

    

//显示picker

showPicker = () => {

Picker.init({

pickerData: this._createDateData(),

pickerCancelBtnText: '取消',

pickerConfirmBtnText: '确定',

pickerFontColor: [ 255, 0, 0, 1],

pickerTitleText: '',

selectedValue: [ 900],

onPickerConfirm: (pickedValue, pickedIndex) => {

console.log( 'date', pickedValue, pickedIndex);

// this.props.dispatch(createAction( 'teamStatisticModle/updateState')({ startPickedValue: pickedValue }))

},

onPickerCancel: (pickedValue, pickedIndex) => {

console.log( 'date', pickedValue, pickedIndex);

},

onPickerSelect: (pickedValue, pickedIndex) => {

console.log( 'date', pickedValue, pickedIndex);

}

});

Picker.show();

}

效果如下：