|
| 1 | +import React, { useState, useEffect, useRef, useMemo } from 'react'; |
| 2 | +import { |
| 3 | + View, |
| 4 | + StyleSheet, |
| 5 | + StyleProp, |
| 6 | + TextStyle, |
| 7 | + ViewStyle, |
| 8 | + LayoutChangeEvent, |
| 9 | + TouchableOpacity, |
| 10 | + Text, |
| 11 | + ScrollView, |
| 12 | + Animated, |
| 13 | + NativeSyntheticEvent, |
| 14 | + NativeScrollEvent, |
| 15 | +} from 'react-native'; |
| 16 | + |
| 17 | +export interface PickerDate { |
| 18 | + label?: string; |
| 19 | + render?: (key: string, record: PickerDate, index: number) => React.ReactNode; |
| 20 | + [key: string]: any; |
| 21 | +} |
| 22 | + |
| 23 | +export interface PickerProps { |
| 24 | + /** 显示几行, 默认 3 */ |
| 25 | + lines?: number; |
| 26 | + /** 指定需要显示的 key, 默认使用 data 的 label 属性 */ |
| 27 | + key?: string; |
| 28 | + /** 需要渲染的数据 */ |
| 29 | + date?: Array<PickerDate>; |
| 30 | + /** item 容器样式 */ |
| 31 | + containerStyle?: { |
| 32 | + /** 激活的容器样式 */ |
| 33 | + actived?: StyleProp<ViewStyle>; |
| 34 | + /** 未激活的容器样式 */ |
| 35 | + unactived?: StyleProp<ViewStyle>; |
| 36 | + }; |
| 37 | + /** 容器的文本样式 */ |
| 38 | + textStyle?: { |
| 39 | + /** 激活的文本样式 */ |
| 40 | + actived?: StyleProp<TextStyle>; |
| 41 | + /** 未激活的文本样式 */ |
| 42 | + unactived?: StyleProp<TextStyle>; |
| 43 | + }; |
| 44 | + /** 选中当前项的下标 */ |
| 45 | + value?: number; |
| 46 | + /** value 改变时触发 */ |
| 47 | + onChange?: (value: number) => unknown; |
| 48 | +} |
| 49 | + |
| 50 | +const Picker = (props: PickerProps) => { |
| 51 | + const { |
| 52 | + lines = 3, |
| 53 | + key = 'label', |
| 54 | + date = new Array<PickerDate>(), |
| 55 | + containerStyle = {}, |
| 56 | + textStyle = {}, |
| 57 | + value = 0, |
| 58 | + onChange, |
| 59 | + } = props; |
| 60 | + const scrollView = useRef<ScrollView>(); |
| 61 | + const ItemHeights = useRef<Array<number>>([]).current; |
| 62 | + const onPressORonScroll = useRef<'onPress' | 'onScroll'>('onScroll'); |
| 63 | + const timer = useRef<NodeJS.Timeout>(); |
| 64 | + const saveY = useRef<number>(0); |
| 65 | + const Y = useRef(new Animated.Value(0)).current; |
| 66 | + const currentY = useRef<number>(0); |
| 67 | + const isTouchEnd = useRef<boolean>(false); |
| 68 | + const isScroll = useRef<boolean>(false); |
| 69 | + const [current, setCurrent] = useState(0); |
| 70 | + useEffect(() => { |
| 71 | + onChange?.(current); |
| 72 | + }, [current]); |
| 73 | + useEffect(() => { |
| 74 | + if (value !== current) { |
| 75 | + const leng = value > date.length - 1 ? date.length - 1 : value; |
| 76 | + location((style.containerHeight as number) * (leng + 1), leng); |
| 77 | + setCurrent(leng); |
| 78 | + } |
| 79 | + }, [value]); |
| 80 | + const style = useMemo(() => { |
| 81 | + const containerUn = StyleSheet.flatten([styles.container, containerStyle.unactived]); |
| 82 | + const containerAc = StyleSheet.flatten([styles.container, styles.border, containerStyle.actived]); |
| 83 | + const textUn = StyleSheet.flatten([styles.textStyle, textStyle.unactived]); |
| 84 | + const textAc = StyleSheet.flatten([styles.textStyle, styles.acTextStyle, textStyle.unactived]); |
| 85 | + const containerHeight = containerUn.height || 50; |
| 86 | + return { |
| 87 | + containerAc, |
| 88 | + containerUn, |
| 89 | + textUn, |
| 90 | + textAc, |
| 91 | + containerHeight, |
| 92 | + }; |
| 93 | + }, [containerStyle, textStyle]); |
| 94 | + const location = (scrollY: number, index: number) => { |
| 95 | + scrollView.current?.scrollTo({ x: 0, y: scrollY - (style.containerHeight as number), animated: true }); |
| 96 | + currentY.current = index; |
| 97 | + }; |
| 98 | + const scrollYEnd = (event: NativeSyntheticEvent<NativeScrollEvent>) => { |
| 99 | + if (onPressORonScroll.current === 'onScroll') { |
| 100 | + return; |
| 101 | + } |
| 102 | + const scrollY = event.nativeEvent.contentOffset.y; |
| 103 | + const currentHeight = ItemHeights[currentY.current] - ItemHeights[0]; |
| 104 | + if (scrollY - 2 <= currentHeight && scrollY + 2 >= currentHeight) { |
| 105 | + setCurrent(currentY.current); |
| 106 | + } |
| 107 | + onPressORonScroll.current = 'onScroll'; |
| 108 | + }; |
| 109 | + const setScrollY = () => { |
| 110 | + if (onPressORonScroll.current === 'onPress') { |
| 111 | + return false; |
| 112 | + } |
| 113 | + isTouchEnd.current = true; |
| 114 | + if (!isTouchEnd.current || !isScroll.current) { |
| 115 | + return false; |
| 116 | + } |
| 117 | + if (saveY.current <= ItemHeights[0] / 1.1) { |
| 118 | + scrollView.current?.scrollTo({ x: 0, y: 0, animated: true }); |
| 119 | + setCurrent(0); |
| 120 | + return false; |
| 121 | + } |
| 122 | + const spot = saveY.current / ItemHeights[0] + ''; |
| 123 | + const integer = Number(spot.substr(0, spot.indexOf('.'))); |
| 124 | + const decimal = Number(spot[spot.indexOf('.') + 1]); |
| 125 | + const itemIndex = decimal >= 9 ? integer + 1 : integer; |
| 126 | + scrollView.current?.scrollTo({ x: 0, y: ItemHeights[itemIndex] - ItemHeights[0], animated: true }); |
| 127 | + setCurrent(itemIndex); |
| 128 | + isScroll.current = false; |
| 129 | + isTouchEnd.current = false; |
| 130 | + }; |
| 131 | + const getItemHeight = (event: LayoutChangeEvent) => { |
| 132 | + const { height } = event.nativeEvent.layout; |
| 133 | + ItemHeights?.push(height * ItemHeights.length + height); |
| 134 | + }; |
| 135 | + return ( |
| 136 | + <View style={{ paddingVertical: 10, height: (style.containerHeight as number) * lines + 10 }}> |
| 137 | + <ScrollView |
| 138 | + showsVerticalScrollIndicator={false} |
| 139 | + style={{ marginTop: -1 }} |
| 140 | + ref={scrollView as React.LegacyRef<ScrollView>} |
| 141 | + onMomentumScrollEnd={scrollYEnd} |
| 142 | + scrollEventThrottle={16} |
| 143 | + onTouchEnd={setScrollY} |
| 144 | + onScroll={Animated.event([{ nativeEvent: { contentOffset: { y: Y } } }], { |
| 145 | + listener: (event: NativeSyntheticEvent<NativeScrollEvent>) => { |
| 146 | + if (onPressORonScroll.current === 'onPress' || !isTouchEnd.current) { |
| 147 | + return false; |
| 148 | + } |
| 149 | + isScroll.current = false; |
| 150 | + saveY.current = event.nativeEvent.contentOffset.y; |
| 151 | + if (timer.current) { |
| 152 | + clearTimeout(timer.current!); |
| 153 | + timer.current = undefined; |
| 154 | + } |
| 155 | + timer.current = setTimeout(() => { |
| 156 | + isScroll.current = true; |
| 157 | + setScrollY(); |
| 158 | + clearTimeout(timer.current!); |
| 159 | + timer.current = undefined; |
| 160 | + }, 160); |
| 161 | + }, |
| 162 | + useNativeDriver: false, |
| 163 | + })} |
| 164 | + > |
| 165 | + {date.map((item, index) => ( |
| 166 | + <TouchableOpacity |
| 167 | + onLayout={getItemHeight} |
| 168 | + key={index} |
| 169 | + activeOpacity={1} |
| 170 | + onPress={() => { |
| 171 | + onPressORonScroll.current = 'onPress'; |
| 172 | + location(ItemHeights![index], index); |
| 173 | + }} |
| 174 | + > |
| 175 | + {React.isValidElement(item.render?.(item[key], item, index)) ? ( |
| 176 | + item.render?.(item[key], item, index) |
| 177 | + ) : ( |
| 178 | + <View style={style.containerUn}> |
| 179 | + <Text style={current === index ? style.textAc : style.textUn}>{item[key]}</Text> |
| 180 | + </View> |
| 181 | + )} |
| 182 | + </TouchableOpacity> |
| 183 | + ))} |
| 184 | + {new Array(lines - 1).fill('').map((item, index) => ( |
| 185 | + <View key={index} style={style.containerUn} /> |
| 186 | + ))} |
| 187 | + {/* style.containerHeight as number * lines + 10 */} |
| 188 | + </ScrollView> |
| 189 | + <View style={[style.containerAc, { top: (-style.containerHeight as number) * lines + 10 }]} /> |
| 190 | + <View style={[style.containerAc, { top: (-style.containerHeight as number) * (lines - 1) + 10 }]} /> |
| 191 | + </View> |
| 192 | + ); |
| 193 | +}; |
| 194 | + |
| 195 | +const styles = StyleSheet.create({ |
| 196 | + container: { |
| 197 | + height: 50, |
| 198 | + justifyContent: 'center', |
| 199 | + alignItems: 'center', |
| 200 | + }, |
| 201 | + border: { |
| 202 | + backgroundColor: '#E6E6E6', |
| 203 | + height: 1, |
| 204 | + position: 'relative', |
| 205 | + zIndex: 999, |
| 206 | + }, |
| 207 | + textStyle: { |
| 208 | + fontSize: 20, |
| 209 | + color: '#000', |
| 210 | + }, |
| 211 | + acTextStyle: { |
| 212 | + color: '#fd8a00', |
| 213 | + }, |
| 214 | +}); |
| 215 | + |
| 216 | +export default Picker; |
0 commit comments