react-native可自定义联级选择器

1. • 组件代码

import React, {useState,useEffect,useRef,useCallback,Component,} from 'react';
import {View,Text,Dimensions,StyleSheet,TouchableOpacity,Image,FlatList,ScrollView,} from 'react-native';
import {scale, sc} from 'react-native-size-matters';
import { isIOSDevice } from '../utils/DimensionUtil';
const {width, height} = Dimensions.get('window');
let screenWidth = width;
let itemHeight = sc(42); // item高度
let distanceItem = 2; //选中高亮高度调节，距离顶部item个高度
// let deviceName = global?.AppInfo?.deviceName  == 'HUAWEI' || global?.AppInfo?.deviceName == 'HONOR' || global?.AppInfo?.deviceName == 'OPPO' ? true : false;
let deviceName = global?.AppInfo?.deviceName  == 'Xiaomi' || global?.AppInfo?.deviceName  == 'Redmi' ? true : false;
export default class ScrollPicker extends Component {
  /**
   *
 1. @param {*} pickData 二维数组,每一个子数组为一联[[{a:1},{a:2}],[{a:11},{a:12}],...arr]
 2. @param {*} selectedValue 已选下标组合值,index为0时为第一列,index为1时为第二列...,如[2,1]则表示默认选中第一列的第3个值,第二列的第2个值
 3. @param {*} onChange(data, index, scrollIndex, selectedValue) 回调函数: [具体值] | 第n列下标 | 当前选择的行数下标 | [第(当前索引下标)列选中的下标,第(当前索引下标)列选中的下标,...]
 4. @param {*} confirm(data, index, scrollIndex, selectedValue) 点击确认按钮  回调同上 通过ref触发
 5.  6. iot扩展：
 7. @param dataType (1-血压   2-心率   3-体重   4-睡眠    5-血糖)
 8. @param allPickerDate n年对应的n个月数据 [{"key":"2022年","data":[{"a":"1月"},{"a":"2月"}],"date":["2022-01","2022-02"]},{"key":"2021年","data":[{"a":"12月"}],"date":["2021-12"]}]
   */

  constructor(props) {
    super(props);
    this.state = {
      bottomHeight: sc(350), // 底部滚动区域高度
      selectedValue: props.selectedValue || [0,0],
      pickData: props.pickData || [],
      allData: {}
      // selectedValue: [2,1],
      // pickData: [[{a: 1},{a: 2},{a: 3},{a: 4},{a: 5}],[{a: 11},{a: 12},{a: 13},{a: 14},{a: 15}]]
    };
  }

  componentDidMount = () => {
    // deviceName = global?.AppInfo?.deviceName
    // deviceName = global?.AppInfo?.deviceName  == 'HUAWEI' || global?.AppInfo?.deviceName == 'HONOR' || global?.AppInfo?.deviceName == 'OPPO' ? true : false;
    deviceName = global?.AppInfo?.deviceName  == 'Xiaomi' || global?.AppInfo?.deviceName  == 'Redmi' ? true : false;
    console.log('deviceName', global?.AppInfo?.deviceName);
    //   console.log('111111111111+++++++++++++=====',this.props.pickData)
  };
  onMomentumScrollBegin = ({nativeEvent}) => {
    // console.log("onMomentumScrollBegin", nativeEvent);
  };

  onMomentumScrollEnd = (index, {nativeEvent}) => {
    let {selectedValue} = this.state;
    let unitHeight = itemHeight;
    let {contentOffset} = nativeEvent;
    let offsetY = contentOffset.y;
    let scrollIndex = Math.round(offsetY / unitHeight);
    selectedValue[index] = scrollIndex;
    let state = true;
    // this.setState({selectedValue});
    this[`refs${index}`]?.scrollTo({
      x: 0,
      y: unitHeight * scrollIndex,
      animated: true,
    });
    let data = []
    this.state.pickData.map((item, i) => {
      let svi = selectedValue[i] <= 0 ? 0 : selectedValue[i]
      if(item?.[svi]?.a){
        data.push(item?.[svi]?.a)
      }
      else{
        //iot 年、月日期动态高亮（若滚动列没有对应下一列的高亮，则置为高亮最后一项。）
        if(!this.state.pickData?.[i]){
          state = false;
        }
        else{
          if(i == 2 || i == 1){
            data.push(item?.[this.state.pickData[i].length-1]?.a);
            selectedValue[i] = this.state.pickData[i].length-1;
          }
        }
      }
    });

    // 解决ios年滚动超出最后一项，报错问题。
    if(!state) return;
    if(this.props?.dataType && data?.length == 1 && data?.[0].indexOf('月') != -1){
      data.unshift(this.state.pickData[0][this.state.pickData[0].length-1]?.a);
      // selectedValue = [0,this.state.pickData[1].length-1];
      // console.log('-----------data1111',data,selectedValue)
    };

    let allData = {data, index, scrollIndex, selectedValue}
    this.setState({allData})
    this.setState({selectedValue});

    let pickArr = this.state.pickData;
    // 动态渲染数据 index滚动列（0年份、1月份、2日）
    if(this.props?.dataType){
       /**
        * 年、月
        * 动态渲染年份对应的月份（例：n年对应1、2、3月的数据，n+n年对应9、10、11、12月的数据）
       */
      // if(this.props?.dataType != 2 && index == 0){
      if(index == 0){
        // console.log('______________________________',JSON.stringify(this.props.allPickerDate))
        let month = [];
        this.props.allPickerDate.map((item,index)=>{
          if(item.key == data[0]){
            month = item.data;
          }
        });
        this.setState({
          pickData: [pickArr[0],month]
        })
        this.props?.onChange({data, index, scrollIndex, selectedValue},[pickArr[0],month]);
        return;
      };

      /**
       * 年、月、日
       */
      // if(this.props?.dataType == 2){
      //   // 若当前滚动的为日，则不需要更改数据
      //   if(index == 2){
      //   this.props?.onChange({data, index, scrollIndex, selectedValue},null);
      //   // this.props?.onChange({data, index, scrollIndex, selectedValue},pickArr);
      //     return;
      //   };
      //   // 若当前滚动的为年、月，则需要动态更改对应的日期数据。（不同年份不同月份日期数据不同）
      //   let month = data[1];
      //   if(month.length <3){
      //     month = '0' + month
      //   };
      //   let dayArr = [];
      //   let lastDay = new Date(
      //     data[0].slice(0,4),
      //     month.slice(0,2),
      //     0,
      //   ).getDate();
      //   for(var i=1;i<=lastDay; i ++){
      //     dayArr.push({a: `${i}日`})
      //   };
      //   this.setState({
      //     pickData: [pickArr[0],pickArr[1],dayArr]
      //   });
      //   this.props?.onChange({data, index, scrollIndex, selectedValue},[pickArr[0],pickArr[1],dayArr]);
      //   return;
      // }

      // dataType != 2 && index != 0  若当前滚动的为月，则不需要更改数据
      this.props?.onChange({data, index, scrollIndex, selectedValue},null);
      // this.props?.onChange({data, index, scrollIndex, selectedValue},[pickArr[0],pickArr[1]]);
      return;
    }
    else{
      this.props.onChange &&
      this.props.onChange({data, index, scrollIndex, selectedValue}); //回调函数: [具体值] | 第n列下标 | 当前选择的行数下标 | [第(当前索引下标)列选中的下标,第(当前索引下标)列选中的下标,...]
    }
  };

  onLayout = () => {
    let unitHeight = itemHeight;
    let {selectedValue} = this.state;
    selectedValue?.forEach((item, index) => {
      this[`refs${index}`]?.scrollTo({
        x: 0,
        y: unitHeight * item,
        animated: true,
      });
    });
  };

  confirm = () => { //点击确认按钮
    let {selectedValue} = this.state;
    if(JSON.stringify(this.state.allData) === '{}'){ //没有选择任何值，无任何滑动 直接点确定
      let data = []
      this.state.pickData.map((item, i) => {
          data.push(item[selectedValue[i]].a)
      })
      this.props.confirm &&
      this.props.confirm({data, selectedValue: selectedValue})
    }else{
      this.props.confirm &&
      this.props.confirm({...this.state.allData})
    }
  }

  renderSelectColumn = (list, index) => {
    let width = screenWidth / this.state.pickData.length - sc(30);
    return (
      <View style={{height: '100%', width: width, alignItems: 'center'}}>
        <ScrollView
          ref={node => {
            this[`refs${index}`] = node;
          }}
          bounces={false}
          onLayout={this.onLayout}
          alwaysBounceHorizontal={false}
          showsVerticalScrollIndicator={false}
          onMomentumScrollBegin={this.onMomentumScrollBegin}
          onScrollEndDrag={isIOSDevice ? this.onMomentumScrollEnd.bind(this, index):null} // ios用此方法监听
          onMomentumScrollEnd={isIOSDevice ? null : this.onMomentumScrollEnd.bind(this, index)} // android用此方法监听
        >
          <View
            style={{
              height: itemHeight*distanceItem, // 选中高亮高度调节，*n为距离顶部n个item高度
              width: width,
              // width: sc(Dimensions.get("screen").width/this.state.pickData.length),
              justifyContent: 'center',
              alignItems: 'center',
            }}></View>
          {list?.length ?
            list?.map((item, index1) => {
              return (
                <View
                  key={index1}
                  style={{
                    height: itemHeight,
                    // width: sc(Dimensions.get("screen").width/this.state.pickData.length),
                    justifyContent: 'center',
                    alignItems: 'center',
                  }}>
                  <Text
                    style={[
                      {fontSize: sc(17), color: '#AFAFAF',},
                      this.state.selectedValue?.[index] == index1
                      // paddingHorizontal: sc(20),
                        ? {color: this.props?.fontColor || '#24B39B', fontWeight: 'bold',}
                        : null,
                    ]}>
                    {item.a}
                  </Text>
                </View>
              );
            }):null}
          <View
            style={{
              height: isIOSDevice ? sc(this.state.bottomHeight || 0) - (itemHeight*4-sc(40)) : sc(this.state.bottomHeight || 0) - (itemHeight*(deviceName ? 3.8 : 3.2)-sc(20)), // 调节底部最后一个选项顶起起的高度 米系与其他安卓机有点差距
            //   width: sc(100),
            //   height: itemHeight*5+sc(25),
              justifyContent: 'center',
              alignItems: 'center',
            //   backgroundColor: 'red',
            }}></View>
        </ScrollView>
      </View>
    );
  };

  render() {
    return (
      <React.Fragment>
        <View style={{ position: "absolute", top: itemHeight*(distanceItem+1)+sc(15), width, height: sc(.5), backgroundColor: "#EEEEEE", zIndex: 999 }}></View>
        <View style={{ position: "absolute", top: itemHeight*(distanceItem+2)+sc(15), width, height: sc(.5), backgroundColor: "#EEEEEE", zIndex: 999 }}></View>
        {/* <View style={{ position: "absolute", top: itemHeight*3+sc(15), width, height: StyleSheet.hairlineWidth, backgroundColor: "#EEEEEE", zIndex: 999 }}></View> */}
        <View
          onLayout={e => {
            e.nativeEvent.layout.height != this.state.bottomHeight &&
              this.setState({bottomHeight: e.nativeEvent.layout.height});
          }}
          style={{
            width: screenWidth,
            // height: sc(150),
            flexDirection: 'row',
            alignItems: 'center',
            justifyContent: 'center',
            overflow: 'hidden',
          }}>
          {this.state.pickData?.map((item, index) => {
            return <View key={index}>{this.renderSelectColumn(item, index)}</View>
          })}
        </View>
      </React.Fragment>
    );
  }
}

2. 父组件代码

let date = [
    [
        {
            "a": "00时"
        },
        {
            "a": "01时"
        },
        {
            "a": "02时"
        },
        {
            "a": "03时"
        },
        {
            "a": "04时"
        },
        {
            "a": "05时"
        },
        {
            "a": "06时"
        },
        {
            "a": "07时"
        },
        {
            "a": "08时"
        },
        {
            "a": "09时"
        },
        {
            "a": "10时"
        },
        {
            "a": "11时"
        },
        {
            "a": "12时"
        },
        {
            "a": "13时"
        },
        {
            "a": "14时"
        },
        {
            "a": "15时"
        },
        {
            "a": "16时"
        },
        {
            "a": "17时"
        },
        {
            "a": "18时"
        },
        {
            "a": "19时"
        },
        {
            "a": "20时"
        },
        {
            "a": "21时"
        },
        {
            "a": "22时"
        },
        {
            "a": "23时"
        }
    ],
    [
        {
            "a": "00分"
        },
        {
            "a": "30分"
        }
    ]
]；

scrollPicker.current?.confirm(); // 触发confirm

//html部分
<ScrollPicker
 ref={scrollPicker}
 selectedValue={[ 9, 0]} // 默认选中: 9点
 pickData={date}
   confirm={data => {
    console.log('confirm==', data);
   }}
/>