首先参考开源项目地址: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();
}
效果如下: