返回
如何安装tracker（封装Picker组件）
如何安装tracker（封装Picker组件）
2024-09-29 02:01:34  作者:囬忆好美  网址:https://m.xinb2b.cn/life/bxv207939.html

import { View, Text, TouchableWithoutFeedback, TouchableOpacity, FlatList,} from 'react-native'import React,{ PureComponent, Component,} from 'react'import _ from 'lodash'import styleSheet, {getThemeColor} from '../utils/styleSheet'import {Callback} from "modern/types/lang";import Modal from './Modal'import {getScreenHeight, getScreenWidth} from "modern/consts/ui-common";const styles = styleSheet.create({ container:{ flex:1, backgroundColor: 0x00000074, alignItems: 'center', justifyContent: 'flex-end', }, contentView:{ flexDirection:'row', justifyContent: 'space-around', backgroundColor: 'white' }, stage:{ top:0, bottom:0, left:0, right:0, position:'absolute', zIndex:10, flexDirection:'row', justifyContent: 'space-around', }, maskView:{ left:0, right:0, position:'absolute', top:0, bottom:0, zIndex:0, justifyContent:'space-between' }, emptyView:{ height:50, flexDirection:'row', justifyContent:'space-between', paddingHorizontal:20, backgroundColor: 'white', }, maskStyle:{ width:'100%', // backgroundColor:'rgba(232,232,232,0.9)', borderColor:"rgba(232,232,232,0.9)", backgroundColor:'white' }, midMaskStyle:{ backgroundColor:'#f9f9f9' }, headerBtnView:{ height:50,justifyContent: 'center' }, cancelText:{ fontSize:16,color:'gray' }})function DefaultView (){ return ( <View style={{flex:1,justifyContent:'center',alignItems: 'center'}}> <Text>暂无数据</Text> </View> )}interface ISHeadProps { customHead:any, confirm:Callback, hide:Callback, headOptions:any}const Head:React.FC<ISHeadProps> = React.memo(({customHead,confirm,hide,headOptions})=>{ if(customHead && _.isFunction(customHead)){ return customHead(confirm,hide) } const { cancelTextStyle={}, cancelBtnView={}, confirmBtnView={}, confirmTextStyle={}, leftText='取消', rightText='确定', headerContainView={}, } = headOptions return <View style={[styles.emptyView,headerContainView]}> <TouchableOpacity style={[styles.headerBtnView,cancelBtnView]} onPress={hide}> <Text style={[styles.cancelText,cancelTextStyle]}>{leftText}</Text> </TouchableOpacity> <TouchableOpacity onPress={confirm} style={[styles.headerBtnView,confirmBtnView]}> <Text style={[{color:getThemeColor(),fontSize:16},confirmTextStyle]}>{rightText}</Text> </TouchableOpacity> </View>})interface ISEmpty { hide:Callback}const Empty:React.FC<ISEmpty> = React.memo(({hide})=>{ return <TouchableWithoutFeedback onPress={hide}> <View style={{flex:1,width:getScreenWidth()}} /> </TouchableWithoutFeedback>})interface ISMaskView { maxLength:number, itemHeihght:number, maskOptions:any,}const MaskView:React.FC<ISMaskView> = React.memo(({maxLength,itemHeihght,maskOptions={}})=>{ const { upMaskView, bottomMaskView, midMaskView } = maskOptions const mid = Math.floor(maxLength/2) return <View style={[styles.maskView]}> <View style={[styles.maskStyle,{height:itemHeihght*mid,borderBottomWidth:0.5,},upMaskView]}/> <View style={[styles.midMaskStyle,{height:itemHeihght},midMaskView]} /> <View style={[styles.maskStyle,{height:itemHeihght*mid,borderTopWidth:0.5,},bottomMaskView]}/> </View>})interface ISourceType { id:string, name:string, sub?:ISourceType[] [propname:string]:any,}interface ISitemOptons { itemHeihght?:number, maxLength?:5 | 7 | 9, ActiveTextStyle?:any, normalTextStyle?:any,}interface ISProps { sourceData:ISourceType[], cancel?:Callback, confirm:Callback, selectData:ISourceType[], pickerType:'scroll' | 'click' | 'all', customHead:any, headOptions:any, maskOptions:any, itemOptons:ISitemOptons, isLinkage:boolean, renderListEmptyComponent:Callback, emptyOptions:any, wrapOptions:any, EmptyView:any}interface ISState { visible:boolean, floor:number,}function WithHeadAndMethod(WrapComponent:any){ return class PickerAlertView extends PureComponent<ISProps,ISState>{ public selectedData:ISourceType[] =[] public static defaultProps = { itemOptons:{}, selectData:[], headOptions:{}, pickerType:'all', maskOptions:{}, isLinkage:false, emptyOptions:{}, wrapOptions:{ stageView:{} } } constructor(props:ISProps) { super(props); this.state = { visible:false, floor:this.getMaxFloor(), } } public getMaxFloor = ()=>{ const { sourceData,isLinkage } = this.props if(_.isEmpty(sourceData)) return 0 if(isLinkage) return sourceData.length let floor:number = 1 function treeData(arr:any){ const sub:any = arr.find((item:any)=>item?.sub?.length > 0) if(sub){ floor = floor 1 let arr2:any = [] arr.forEach((item:any)=>{ if(item?.sub?.length>0){ arr2 = arr2.concat(item.sub) } }) treeData(arr2) } } treeData(sourceData) return floor } public show = ()=>{ this.setState({visible:true}) } public confirm = ()=>{ const { confirm=_.noop } = this.props this.hide() confirm(this.selectedData) } public hide = ()=>{ const { cancel=_.noop } = this.props cancel() this.setState({visible:false}) } public getSelected = ()=>this.selectedData private setSelected = (item:ISourceType,floor:number)=>{ this.selectedData[floor] = item } public componentDidUpdate(preProps,prevState,snapshot){ if(!_.isEqual(this.props.sourceData,preProps.sourceData)){ this.setState({ floor:this.getMaxFloor() }) } } public render(){ const { visible, floor, } = this.state const { selectData, sourceData, pickerType, customHead, headOptions, maskOptions, itemOptons, isLinkage, renderListEmptyComponent, emptyOptions, wrapOptions, EmptyView = DefaultView } = this.props const { stageView } = wrapOptions if(!visible) return null const { maxLength=9, itemHeihght=50, ActiveTextStyle={}, normalTextStyle={} } = itemOptons return ( <Modal visible={visible} animationType="slide" transparent={true} > <View style={styles.container} > <Empty hide={this.hide}/> <View style={{ width:getScreenWidth()}}> <Head headOptions={headOptions} hide={this.hide} confirm={this.confirm} customHead={customHead} /> <View style={[{height:itemHeihght*maxLength},styles.contentView]}> <View style={[styles.stage,stageView]}>{ _.isEmpty(sourceData) ?<EmptyView/>: <WrapComponent sourceList={sourceData} setSelect={this.setSelected} floor={floor} currentFloor={0} maxLength={maxLength} defaultSelected = {selectData} itemHeihght={itemHeihght} ActiveTextStyle={ActiveTextStyle} normalTextStyle={normalTextStyle} pickerType={pickerType} originData={sourceData} isLinkage={isLinkage} renderListEmptyComponent={renderListEmptyComponent} emptyOptions={emptyOptions} />} </View> <MaskViewmaxLength={maxLength}itemHeihght={itemHeihght}maskOptions={maskOptions} /> </View> </View> </View> </Modal> ) } }}interface ISItemProps { sourceList:ISourceType[], setSelect:Callback, floor:number, currentFloor:number, maxLength: 5 | 7 | 9, defaultSelected:ISourceType[], itemHeihght:number, ActiveTextStyle:any, normalTextStyle:any, pickerType:string, isLinkage:boolean, originData:any, renderListEmptyComponent:Callback, emptyOptions:any}interface ISItemState { nextData:ISourceType[], currentChoose:ISourceType, initialScrollIndex:number, renderList:any[], surerefresh:any}class PickerAlertViewItem extends PureComponent<ISItemProps,ISItemState> { public scrollView:any public flatEl:any public currentItem:any public itemEL:any public config:any = { waitForInteraction: false, itemVisiblePercentThreshold:100, } public constructor(props:ISItemProps) { super(props); this.state = { nextData:this.defaultRenderList(), currentChoose:this.getDefaultChoose(), initialScrollIndex:this.getInitialScrollIndex(), renderList:this.flatListData(), surerefresh:null, } } public getInitialScrollIndex = ()=>{ const {defaultSelected,currentFloor,sourceList } = this.props if(_.isEmpty(defaultSelected)) return 0 const initIndex = sourceList.findIndex(item=>String(item.id) === String(defaultSelected[currentFloor]?.id)) return initIndex<0?0:initIndex } public defaultRenderList = ()=>{ const { currentFloor, floor, defaultSelected, sourceList,isLinkage,originData} = this.props if(isLinkage){ return originData[currentFloor 1] } const getNoFefault = ()=>this.props.sourceList?.[0]?.sub || [] const getDefaultList = ()=>{ if(currentFloor 1 === floor ) return [] return sourceList.find(value=>value.id === defaultSelected[currentFloor].id)?.sub || getNoFefault() } return _.isEmpty(defaultSelected)?getNoFefault():getDefaultList() } public getDefaultChoose = ()=>{ const { defaultSelected, currentFloor, sourceList } = this.props return _.isEmpty(defaultSelected)?sourceList?.[0]:(sourceList.find(item=>item.id === defaultSelected?.[currentFloor]?.id) || sourceList?.[0]) } public mid = ()=>{ const { maxLength } = this.props return Math.floor(maxLength/2) } public flatListData = (nextData:any[])=>{ const { sourceList,currentFloor,originData ,isLinkage} = this.props const mid = this.mid() const arr = Array(mid).fill({id:'',name:'',sub:[]}) let currentData = nextData?nextData:sourceList if(isLinkage){ currentData = originData[currentFloor] } if(currentData.length === 0 || !currentData) return [] return [...arr,...currentData,...arr] } public getItemLayout = (data:any,index:any) =>{ const { itemHeihght } = this.props return {length: itemHeihght, offset: itemHeihght * index, index} } public renderItem = ({item,index,separators}:any)=>{ const { itemHeihght ,ActiveTextStyle,normalTextStyle,pickerType} = this.props const {currentChoose} = this.state const itemPress = (pickerType === 'scroll' || item.id === currentChoose?.id)?_.noop:this.clickItem return <TouchableWithoutFeedback onPress={()=>itemPress(item,index)}> <Text numberOfLines={1} style={[ {height:itemHeihght,textAlign:'center',lineHeight:itemHeihght,opacity:0.8,paddingHorizontal: 10, }, item.id === currentChoose?.id?ActiveTextStyle:normalTextStyle ]} >{item.name}</Text> </TouchableWithoutFeedback> } public clickItem =(item:ISourceType,index:any)=>{ const mid = this.mid() if(index<mid) return if(!item) return this.scrollToIndex(index) this.chooseItem(index,item) } public scrollToIndex = (index:any)=>{ const { renderList } = this.state if(renderList.length === 0 || !renderList) return if(this.flatEl){ this.flatEl.scrollToIndex({ index, viewPosition:0.5, animated:true }) } } public chooseItem = (index:number,item:ISourceType)=>{ const { setSelect,currentFloor,isLinkage } = this.props setSelect(item,currentFloor) if(isLinkage) return this.setState({ currentChoose:item || {}, nextData:item?.sub || [] },()=>{ if(this.itemEL) this.itemEL.reduction() }) } public reduction=()=>{ const currentChoose = this.props.sourceList?.[0] || {} const nextData = currentChoose?.sub || [] const mid = this.mid() this.setState({ currentChoose, nextData, renderList:this.flatListData(), surerefresh:Date.now() Math.random(), }) } public componentDidMount(){ this.initSelected() } public componentDidUpdate(preProp:ISItemProps,preState:ISItemState){ const mid = this.mid() if(this.state.surerefresh !== preState.surerefresh){ _.delay(()=>this.clickItem(this.state.currentChoose,mid),100) } } public initSelected = ()=>{ const {setSelect,currentFloor } = this.props const { currentChoose } = this.state setSelect(currentChoose,currentFloor) if(this.flatEl) this.flatEl.recordInteraction() } public renderListEmptyComponent = (data:any)=>{ const {renderListEmptyComponent,itemHeihght,emptyOptions,maxLength} = this.props if(renderListEmptyComponent) return renderListEmptyComponent() return <View style={{height:itemHeihght*maxLength,justifyContent:'center',alignItems: 'center'}}> <Text numberOfLines={1} style={[ { height:itemHeihght, textAlign:'center', lineHeight:itemHeihght, opacity:0.8, paddingHorizontal: 10, } ]} >{emptyOptions.descText || '暂无数据'}</Text> </View> } public render(){ const { floor, currentFloor, setSelect, defaultSelected, maxLength, itemHeihght=50, ActiveTextStyle, normalTextStyle, pickerType, isLinkage, originData, emptyOptions, } = this.props const { nextData, initialScrollIndex, renderList, } = this.state const nextFloor = currentFloor 1 return ( <> <FlatList style={{flex:1}} ref={ref=>this.flatEl = ref} showsHorizontalScrollIndicator={false} showsVerticalScrollIndicator={false} keyExtractor={(item: object, index: number) => String(index)} renderItem={this.renderItem} viewabilityConfig={this.config} data={renderList} getItemLayout={this.getItemLayout} initialScrollIndex={initialScrollIndex} onMomentumScrollEnd={this._moveEnd} scrollEnabled={pickerType === 'click'?false:true} ListEmptyComponent={this.renderListEmptyComponent} /> { floor > nextFloor ? <PickerAlertViewItem ref={ref=>this.itemEL = ref} sourceList={nextData} floor={floor} setSelect={setSelect} currentFloor={nextFloor} defaultSelected={defaultSelected} maxLength={maxLength} itemHeihght={itemHeihght} ActiveTextStyle={ActiveTextStyle} normalTextStyle={normalTextStyle} pickerType={pickerType} isLinkage={isLinkage} originData={originData} emptyOptions={emptyOptions} />: null } </> ) } private _moveEnd=(e)=>{ const {itemHeihght} = this.props const { renderList } = this.state const contentOffset = e.nativeEvent.contentOffset.y; const mid = this.mid() const index = Math.round(contentOffset/itemHeihght) mid this.clickItem(renderList[index],index) }}export default WithHeadAndMethod(PickerAlertViewItem)，今天小编就来说说关于如何安装tracker?下面更多详细答案一起来看看吧!


如何安装tracker

import { View, Text, TouchableWithoutFeedback, TouchableOpacity, FlatList,} from 'react-native'import React,{ PureComponent, Component,} from 'react'import _ from 'lodash'import styleSheet, {getThemeColor} from '../utils/styleSheet'import {Callback} from "modern/types/lang";import Modal from './Modal'import {getScreenHeight, getScreenWidth} from "modern/consts/ui-common";const styles = styleSheet.create({ container:{ flex:1, backgroundColor: 0x00000074, alignItems: 'center', justifyContent: 'flex-end', }, contentView:{ flexDirection:'row', justifyContent: 'space-around', backgroundColor: 'white' }, stage:{ top:0, bottom:0, left:0, right:0, position:'absolute', zIndex:10, flexDirection:'row', justifyContent: 'space-around', }, maskView:{ left:0, right:0, position:'absolute', top:0, bottom:0, zIndex:0, justifyContent:'space-between' }, emptyView:{ height:50, flexDirection:'row', justifyContent:'space-between', paddingHorizontal:20, backgroundColor: 'white', }, maskStyle:{ width:'100%', // backgroundColor:'rgba(232,232,232,0.9)', borderColor:"rgba(232,232,232,0.9)", backgroundColor:'white' }, midMaskStyle:{ backgroundColor:'#f9f9f9' }, headerBtnView:{ height:50,justifyContent: 'center' }, cancelText:{ fontSize:16,color:'gray' }})function DefaultView (){ return ( <View style={{flex:1,justifyContent:'center',alignItems: 'center'}}> <Text>暂无数据</Text> </View> )}interface ISHeadProps { customHead:any, confirm:Callback, hide:Callback, headOptions:any}const Head:React.FC<ISHeadProps> = React.memo(({customHead,confirm,hide,headOptions})=>{ if(customHead && _.isFunction(customHead)){ return customHead(confirm,hide) } const { cancelTextStyle={}, cancelBtnView={}, confirmBtnView={}, confirmTextStyle={}, leftText='取消', rightText='确定', headerContainView={}, } = headOptions return <View style={[styles.emptyView,headerContainView]}> <TouchableOpacity style={[styles.headerBtnView,cancelBtnView]} onPress={hide}> <Text style={[styles.cancelText,cancelTextStyle]}>{leftText}</Text> </TouchableOpacity> <TouchableOpacity onPress={confirm} style={[styles.headerBtnView,confirmBtnView]}> <Text style={[{color:getThemeColor(),fontSize:16},confirmTextStyle]}>{rightText}</Text> </TouchableOpacity> </View>})interface ISEmpty { hide:Callback}const Empty:React.FC<ISEmpty> = React.memo(({hide})=>{ return <TouchableWithoutFeedback onPress={hide}> <View style={{flex:1,width:getScreenWidth()}} /> </TouchableWithoutFeedback>})interface ISMaskView { maxLength:number, itemHeihght:number, maskOptions:any,}const MaskView:React.FC<ISMaskView> = React.memo(({maxLength,itemHeihght,maskOptions={}})=>{ const { upMaskView, bottomMaskView, midMaskView } = maskOptions const mid = Math.floor(maxLength/2) return <View style={[styles.maskView]}> <View style={[styles.maskStyle,{height:itemHeihght*mid,borderBottomWidth:0.5,},upMaskView]}/> <View style={[styles.midMaskStyle,{height:itemHeihght},midMaskView]} /> <View style={[styles.maskStyle,{height:itemHeihght*mid,borderTopWidth:0.5,},bottomMaskView]}/> </View>})interface ISourceType { id:string, name:string, sub?:ISourceType[] [propname:string]:any,}interface ISitemOptons { itemHeihght?:number, maxLength?:5 | 7 | 9, ActiveTextStyle?:any, normalTextStyle?:any,}interface ISProps { sourceData:ISourceType[], cancel?:Callback, confirm:Callback, selectData:ISourceType[], pickerType:'scroll' | 'click' | 'all', customHead:any, headOptions:any, maskOptions:any, itemOptons:ISitemOptons, isLinkage:boolean, renderListEmptyComponent:Callback, emptyOptions:any, wrapOptions:any, EmptyView:any}interface ISState { visible:boolean, floor:number,}function WithHeadAndMethod(WrapComponent:any){ return class PickerAlertView extends PureComponent<ISProps,ISState>{ public selectedData:ISourceType[] =[] public static defaultProps = { itemOptons:{}, selectData:[], headOptions:{}, pickerType:'all', maskOptions:{}, isLinkage:false, emptyOptions:{}, wrapOptions:{ stageView:{} } } constructor(props:ISProps) { super(props); this.state = { visible:false, floor:this.getMaxFloor(), } } public getMaxFloor = ()=>{ const { sourceData,isLinkage } = this.props if(_.isEmpty(sourceData)) return 0 if(isLinkage) return sourceData.length let floor:number = 1 function treeData(arr:any){ const sub:any = arr.find((item:any)=>item?.sub?.length > 0) if(sub){ floor = floor 1 let arr2:any = [] arr.forEach((item:any)=>{ if(item?.sub?.length>0){ arr2 = arr2.concat(item.sub) } }) treeData(arr2) } } treeData(sourceData) return floor } public show = ()=>{ this.setState({visible:true}) } public confirm = ()=>{ const { confirm=_.noop } = this.props this.hide() confirm(this.selectedData) } public hide = ()=>{ const { cancel=_.noop } = this.props cancel() this.setState({visible:false}) } public getSelected = ()=>this.selectedData private setSelected = (item:ISourceType,floor:number)=>{ this.selectedData[floor] = item } public componentDidUpdate(preProps,prevState,snapshot){ if(!_.isEqual(this.props.sourceData,preProps.sourceData)){ this.setState({ floor:this.getMaxFloor() }) } } public render(){ const { visible, floor, } = this.state const { selectData, sourceData, pickerType, customHead, headOptions, maskOptions, itemOptons, isLinkage, renderListEmptyComponent, emptyOptions, wrapOptions, EmptyView = DefaultView } = this.props const { stageView } = wrapOptions if(!visible) return null const { maxLength=9, itemHeihght=50, ActiveTextStyle={}, normalTextStyle={} } = itemOptons return ( <Modal visible={visible} animationType="slide" transparent={true} > <View style={styles.container} > <Empty hide={this.hide}/> <View style={{ width:getScreenWidth()}}> <Head headOptions={headOptions} hide={this.hide} confirm={this.confirm} customHead={customHead} /> <View style={[{height:itemHeihght*maxLength},styles.contentView]}> <View style={[styles.stage,stageView]}>{ _.isEmpty(sourceData) ?<EmptyView/>: <WrapComponent sourceList={sourceData} setSelect={this.setSelected} floor={floor} currentFloor={0} maxLength={maxLength} defaultSelected = {selectData} itemHeihght={itemHeihght} ActiveTextStyle={ActiveTextStyle} normalTextStyle={normalTextStyle} pickerType={pickerType} originData={sourceData} isLinkage={isLinkage} renderListEmptyComponent={renderListEmptyComponent} emptyOptions={emptyOptions} />} </View> <MaskViewmaxLength={maxLength}itemHeihght={itemHeihght}maskOptions={maskOptions} /> </View> </View> </View> </Modal> ) } }}interface ISItemProps { sourceList:ISourceType[], setSelect:Callback, floor:number, currentFloor:number, maxLength: 5 | 7 | 9, defaultSelected:ISourceType[], itemHeihght:number, ActiveTextStyle:any, normalTextStyle:any, pickerType:string, isLinkage:boolean, originData:any, renderListEmptyComponent:Callback, emptyOptions:any}interface ISItemState { nextData:ISourceType[], currentChoose:ISourceType, initialScrollIndex:number, renderList:any[], surerefresh:any}class PickerAlertViewItem extends PureComponent<ISItemProps,ISItemState> { public scrollView:any public flatEl:any public currentItem:any public itemEL:any public config:any = { waitForInteraction: false, itemVisiblePercentThreshold:100, } public constructor(props:ISItemProps) { super(props); this.state = { nextData:this.defaultRenderList(), currentChoose:this.getDefaultChoose(), initialScrollIndex:this.getInitialScrollIndex(), renderList:this.flatListData(), surerefresh:null, } } public getInitialScrollIndex = ()=>{ const {defaultSelected,currentFloor,sourceList } = this.props if(_.isEmpty(defaultSelected)) return 0 const initIndex = sourceList.findIndex(item=>String(item.id) === String(defaultSelected[currentFloor]?.id)) return initIndex<0?0:initIndex } public defaultRenderList = ()=>{ const { currentFloor, floor, defaultSelected, sourceList,isLinkage,originData} = this.props if(isLinkage){ return originData[currentFloor 1] } const getNoFefault = ()=>this.props.sourceList?.[0]?.sub || [] const getDefaultList = ()=>{ if(currentFloor 1 === floor ) return [] return sourceList.find(value=>value.id === defaultSelected[currentFloor].id)?.sub || getNoFefault() } return _.isEmpty(defaultSelected)?getNoFefault():getDefaultList() } public getDefaultChoose = ()=>{ const { defaultSelected, currentFloor, sourceList } = this.props return _.isEmpty(defaultSelected)?sourceList?.[0]:(sourceList.find(item=>item.id === defaultSelected?.[currentFloor]?.id) || sourceList?.[0]) } public mid = ()=>{ const { maxLength } = this.props return Math.floor(maxLength/2) } public flatListData = (nextData:any[])=>{ const { sourceList,currentFloor,originData ,isLinkage} = this.props const mid = this.mid() const arr = Array(mid).fill({id:'',name:'',sub:[]}) let currentData = nextData?nextData:sourceList if(isLinkage){ currentData = originData[currentFloor] } if(currentData.length === 0 || !currentData) return [] return [...arr,...currentData,...arr] } public getItemLayout = (data:any,index:any) =>{ const { itemHeihght } = this.props return {length: itemHeihght, offset: itemHeihght * index, index} } public renderItem = ({item,index,separators}:any)=>{ const { itemHeihght ,ActiveTextStyle,normalTextStyle,pickerType} = this.props const {currentChoose} = this.state const itemPress = (pickerType === 'scroll' || item.id === currentChoose?.id)?_.noop:this.clickItem return <TouchableWithoutFeedback onPress={()=>itemPress(item,index)}> <Text numberOfLines={1} style={[ {height:itemHeihght,textAlign:'center',lineHeight:itemHeihght,opacity:0.8,paddingHorizontal: 10, }, item.id === currentChoose?.id?ActiveTextStyle:normalTextStyle ]} >{item.name}</Text> </TouchableWithoutFeedback> } public clickItem =(item:ISourceType,index:any)=>{ const mid = this.mid() if(index<mid) return if(!item) return this.scrollToIndex(index) this.chooseItem(index,item) } public scrollToIndex = (index:any)=>{ const { renderList } = this.state if(renderList.length === 0 || !renderList) return if(this.flatEl){ this.flatEl.scrollToIndex({ index, viewPosition:0.5, animated:true }) } } public chooseItem = (index:number,item:ISourceType)=>{ const { setSelect,currentFloor,isLinkage } = this.props setSelect(item,currentFloor) if(isLinkage) return this.setState({ currentChoose:item || {}, nextData:item?.sub || [] },()=>{ if(this.itemEL) this.itemEL.reduction() }) } public reduction=()=>{ const currentChoose = this.props.sourceList?.[0] || {} const nextData = currentChoose?.sub || [] const mid = this.mid() this.setState({ currentChoose, nextData, renderList:this.flatListData(), surerefresh:Date.now() Math.random(), }) } public componentDidMount(){ this.initSelected() } public componentDidUpdate(preProp:ISItemProps,preState:ISItemState){ const mid = this.mid() if(this.state.surerefresh !== preState.surerefresh){ _.delay(()=>this.clickItem(this.state.currentChoose,mid),100) } } public initSelected = ()=>{ const {setSelect,currentFloor } = this.props const { currentChoose } = this.state setSelect(currentChoose,currentFloor) if(this.flatEl) this.flatEl.recordInteraction() } public renderListEmptyComponent = (data:any)=>{ const {renderListEmptyComponent,itemHeihght,emptyOptions,maxLength} = this.props if(renderListEmptyComponent) return renderListEmptyComponent() return <View style={{height:itemHeihght*maxLength,justifyContent:'center',alignItems: 'center'}}> <Text numberOfLines={1} style={[ { height:itemHeihght, textAlign:'center', lineHeight:itemHeihght, opacity:0.8, paddingHorizontal: 10, } ]} >{emptyOptions.descText || '暂无数据'}</Text> </View> } public render(){ const { floor, currentFloor, setSelect, defaultSelected, maxLength, itemHeihght=50, ActiveTextStyle, normalTextStyle, pickerType, isLinkage, originData, emptyOptions, } = this.props const { nextData, initialScrollIndex, renderList, } = this.state const nextFloor = currentFloor 1 return ( <> <FlatList style={{flex:1}} ref={ref=>this.flatEl = ref} showsHorizontalScrollIndicator={false} showsVerticalScrollIndicator={false} keyExtractor={(item: object, index: number) => String(index)} renderItem={this.renderItem} viewabilityConfig={this.config} data={renderList} getItemLayout={this.getItemLayout} initialScrollIndex={initialScrollIndex} onMomentumScrollEnd={this._moveEnd} scrollEnabled={pickerType === 'click'?false:true} ListEmptyComponent={this.renderListEmptyComponent} /> { floor > nextFloor ? <PickerAlertViewItem ref={ref=>this.itemEL = ref} sourceList={nextData} floor={floor} setSelect={setSelect} currentFloor={nextFloor} defaultSelected={defaultSelected} maxLength={maxLength} itemHeihght={itemHeihght} ActiveTextStyle={ActiveTextStyle} normalTextStyle={normalTextStyle} pickerType={pickerType} isLinkage={isLinkage} originData={originData} emptyOptions={emptyOptions} />: null } </> ) } private _moveEnd=(e)=>{ const {itemHeihght} = this.props const { renderList } = this.state const contentOffset = e.nativeEvent.contentOffset.y; const mid = this.mid() const index = Math.round(contentOffset/itemHeihght) mid this.clickItem(renderList[index],index) }}export default WithHeadAndMethod(PickerAlertViewItem)

接上一版 多级联动组件；增加了非联动组件；完善了配置；优化了使用过程中的小问题；

  • 面对亲人离世表现得很平静（亲人突然离世该如何面对）
  • 2024-09-29亲人突然离世该如何面对周末突然想起一位表妹，发个微信打个招呼，却收到回复说我的爷爷今天去世，我很难过看到的那一瞬间我竟然不知道该如何安慰因为逝世真的是一个很悲伤的词，代表着真的无法再看见了，再听到声音…留下的只有回忆无论已。
  • steam戴森球计划价格（默默更新的戴森球计划）
  • 2024-09-29默默更新的戴森球计划在默默更新一周年后，《戴森球计划》已成为2021年Steam全年游戏好评率第二，并且在所有游戏中好评率排名第29，成为史上最受好评的Steam游戏之一《戴森球计划》，其实是开发团队柚子猫工作室账号下的。
  • 关于最新的返莞通知（首趟返岗专列深夜抵粤）
  • 2024-09-29首趟返岗专列深夜抵粤中新社广州2月19日电题：首趟返岗专列深夜抵粤拉开节后珠三角“抢人”大幕中新社记者程景伟从云南昆明始发的D4856次高铁列车18日22时26分抵达广州南站，这是新春以来抵达广东的首趟异地务工人员返岗专。
  • 无法超越的五首经典（仍旧无法超越的经典）
  • 2024-09-29仍旧无法超越的经典1999年，集英社旗下的《少年JUMP周刊》杂志开始连载漫画《棋魂》（ヒカルの碁）当时恐怕不会有人想到，这部漫画将成为一代经典，不但改编成了卡通，还在2020年播出了中国真人版电视剧《棋魂》中的主角进。
  • 美甲文案（美甲唯美广告文案分享）
  • 2024-09-29美甲唯美广告文案分享指尖新时尚，秀出大不同十指芊芊，美甲做作作；美甲作作，十指千芊芊事业线重要，指上功夫也要了得指尖上的诱惑十姊妹美甲店，让你的芊芊玉指换上千种姿态甲衣美甲，释放你的美丽指上风情美甲店，让您风情万种芊芊玉。
  • 灭蟑螂最有效的方法
  • 2024-09-29灭蟑螂最有效的方法　　1、用毒蟑螂药物　　我们可以买一些毒蟑螂的药物，这是最直接也是最快速的方法，我们把买的药物放在蟑螂经常出没的地方，这样是有效灭蟑螂的有很多灭蟑螂的药物是盒状的我们可以分开放在多出，发线尸体之后及时。
  • 旧青海与新青海的对比（沉睡的记忆青海建省那些事儿）
  • 2024-09-29沉睡的记忆青海建省那些事儿青海省建省以后，西宁县的行政区划作了一些调整民国18年（1929年）7月将西宁县属北部仙米、珠固二寺划归新设立的门源县；民国19年（1930年）8月划西宁县境自东川张其寨起，至临城上下朝阳以北，以及北。
  • tcl华星光电生产的屏幕（华星发布全球首款）
  • 2024-09-29华星发布全球首款IT之家6月21日消息，TCL华星宣布全球首发超低频OLED穿戴技术，具有超低频无频闪、超窄边框、低功耗、宽频段自由切换、TDDI（触控与显示驱动器集成）与低频色彩无变化等亮点▲TCL华星超低频圆形O。
  • 今年秋天做什么菜好吃（入秋后可多做这10道菜）
  • 2024-09-29入秋后可多做这10道菜大家好，欢迎大家来到我的美食自媒体，我是美食领域创作者锦绣V山东：“专注美食，让生活更有味”今天为大家带来了几道家常美食的做法，这几道美食也是深受大家的喜欢，而且是很常见的几道美食天天用普通的食材，做。
  • 美术生能报考哪些专业（美术生可以报考的专业都有哪些）
  • 2024-09-29美术生可以报考的专业都有哪些美术生可以报考的专业都有哪些？哪些专业分数比较低，哪些专业招生人数多，哪些将来发展比较好呢？可以点赞收藏，慢慢观看美术主要分为理论类、美术学造型类、设计类、戏剧影视类、理论类，招生人数少，只有一些专业。
  • 中茶十大顶级普洱茶
  • 2024-09-29中茶十大顶级普洱茶1.大益茶大益茶是普洱茶的开创品牌，也是中华老字号名茶品牌之一2.下关沱茶下关沱茶始建于1902年，以普洱压紧茶为主要业务3.中茶中茶成立于1949年，是国内知名度非常高的茶饮品制造商，也是普洱茶十大。
  • 阴阳师茨木伤害低（阴阳师我茨木）
  • 2024-09-29阴阳师我茨木茨木是游戏里最早期的式神之一了，但从一开始登场到现在，他都是只有一只手，右臂常年丢失直到鬼切上线之后，我们才知道，原来茨木的右手在鬼切的手上不过就算只剩下左手的茨木都是很强的存在了，大家肯定想象过，如。