我如何做才能使数组元素在滑动时不会移动到屏幕中心下方？

问题描述

因此，我正在使用.map（）函数在屏幕上显示名为“小时”的数组。我创建了一个基本的滑动，让我可以滑动所有元素：

const { width,height } = Dimensions.get("window");

const styles = StyleSheet.create({
  display: {
    flexDirection: 'row',},dotContainer: {
    marginTop: height / 2,alignItems: 'center',timeContainer: {
    marginTop: height / 2,text: {
    fontSize: 25,}
})

const SampleFunction = (item) => {
  Alert.alert(item);
}

let hours = new Array(24);
let minutes = new Array(1);

minutes[0] = ':';

for (i = 0,num = 0; i < hours.length; i++,num++) {
  hours[i] = num;
}

const TIME_HEIGHT = styles.text.fontSize  * 1.34;

const snapPoints = hours.map((_,i) => i * -TIME_HEIGHT)

const SleepMode = () => {
  const clock = useClock();
  const index = useValue(0);
  const offsetY = useValue(0);
  const y = useValue(0);

  const {
    gestureHandler,state,veLocity,} = usePanGestureHandler();

  const to = snapPoint(y,veLocity.y,snapPoints);

  useCode(
    () => [
      cond(eq(state,State.ACTIVE),[
        set(y,diffClamp(
            withDecay({
              value: offsetY,veLocity: veLocity.y,}),-hours.length * TIME_HEIGHT + TIME_HEIGHT,0
        )),]),cond(eq(state,State.END),[
          set(y,timing({ clock,from: y,to })),set(offsetY,y),cond(not(clockRunning(clock)),[
          set(index,floor(divide(y,-TIME_HEIGHT))),debug("index",index),debug("offset",offsetY),],[]
  );

  const visibleCards = Math.floor((height - (height / 2 - TIME_HEIGHT) - (height / 2)) / TIME_HEIGHT);

  return (
    <PanGestureHandler {...gestureHandler}>
      <Animated.View style={styles.display}>
        <Animated.View style={styles.timeContainer}>
          {hours.map((item,key) => {
            const positionY = add(y,key * TIME_HEIGHT);
            const isdisappearing = -TIME_HEIGHT;
            const isOnTop = 0;
            const isOnBottom = (visibleCards - 1) * TIME_HEIGHT;
            const isAppearing = visibleCards * TIME_HEIGHT;

            const extraTranslationY = interpolate(y,{
              inputRange: [isOnBottom,isAppearing],outputRange: [0,-TIME_HEIGHT / 4],extrapolate: Extrapolate.CLAMP
            });

            const translateY = add(interpolate(y,{
              inputRange: [-TIME_HEIGHT * key - height / 2,0],outputRange: [-TIME_HEIGHT * key - height / 2,extrapolate: Extrapolate.CLAMP
            }),extraTranslationY);
                
            const opacity = interpolate(positionY,{
              inputRange: [isdisappearing,isOnTop,isOnBottom,outputRange: [0.3,1,0.3],});

            return (
              <Animated.View
                key={key} 
                onPress={ SampleFunction.bind(item) }
                style={[{ opacity,transform: [{ translateY }] }]}
              >
                <Text style={styles.text}> {item} </Text>
              </Animated.View>
            )
          })}
        </Animated.View>
        <Animated.View style={styles.dotContainer}>
          {
            minutes.map(
              (item,key) => {
                return (
                  <Animated.View
                    key={key} 
                    onPress={ SampleFunction.bind(item) }
                  >
                    <Text style={styles.text}> {item} </Text>
                  </Animated.View>
                )
              }
            )
          }
        </Animated.View>
      </Animated.View>
    </PanGestureHandler>
  )
}

export default SleepMode;

位于“点”阵列中的冒号位于屏幕中央。在数组的开始，“小时”的第一个元素位于中心，但是在向下滑动数组后，其移动到中心以下，因此冒号停留在数组末尾的最终和倒数第二个元素之间。 这是一些图片：

我该如何解决？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）