react-native-picker实现三级联动

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

代码如下：

import React from 'react'
import { View, Text, TouchableOpacity, StyleSheet, TextInput } from 'react-native'
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();
}

 

效果如下：