当到达数组的第一个元素时，如何让不透明度停止工作？

问题描述

因此，当您可以使用滑动选择时间时，我正在尝试做一个计时器。我创建了滑动和动画，因此在滑动中间元素上方和下方的元素时会消失。这是我的代码：

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

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

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

const App = () => {
  const [containerHeight,setContainerHeight] = useState(height);

  let numbers = new Array(40);

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

  const TIME_HEIGHT = styles.text.fontSize  * 1.34;

  const clock = useClock();
  const index = useValue(0);
  const snapPoints = numbers.map((_,i) => i * -TIME_HEIGHT)

  const offsetY = useValue(0);
  const y = useValue(0);

  const {
    gestureHandler,state,velocity,translation
  } = usePanGestureHandler();

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

  useCode(
    () => [
      cond(eq(state,State.ACTIVE),[
        set(y,add(offsetY,translation.y))
      ]),cond(eq(state,State.END),timing({ clock,from: y,to })),set(offsetY,y),cond(not(clockRunning(clock)),[
          set(index,floor(divide(y,-TIME_HEIGHT))),debug("index",index)
        ]),]),],[]
  );

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

  return (
    <View>
      <Image 
        style={{
          width: width,height: height / 2 - TIME_HEIGHT,position: 'absolute',zIndex: 0
        }}
        source={require('./assets/TopImage.jpg')}
      />
      <Image 
        style={{
          width: width,height: height / 2,marginTop: height / 2 + TIME_HEIGHT * 2,zIndex: 0
        }}
        source={require('./assets/BotImage.jpg')}
      />

      <PanGestureHandler {...gestureHandler}>
        <Animated.View>
            <Animated.View style={styles.timeContainer}>
              {numbers.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>
      </PanGestureHandler>
    </View>
  )
}

export default App;

但是我有一个问题。当我到达数组的开始或结尾时，我仍然可以向下滑动，因此我的元素将由于不透明而消失。它返回了，但是看起来不太好，所以我该如何解决？

解决方法

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

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

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