1

我目前正在开发一个反应原生的入职屏幕应用程序，并且我遇到了滚动视图的问题。

import Animated, { interpolate } from "react-native-reanimated";
 const { width } = useDimensions().window;
  const x = new Animated.Value(0);
  const scroll = useRef<Animated.ScrollView>(null);
  
  return (
    <Box flex={1} backgroundColor="mainBackground">
      <Box flex={3}>
        <Animated.ScrollView
          showsHorizontalScrollIndicator={false}
          ref={scroll}
          pagingEnabled
          snapToInterval={width}
          scrollEventThrottle={16}
          onScroll={Animated.event([
            {
              nativeEvent: {
                contentOffset: { x },
              },
            },
          ],{listener:(event) => console.log(event)})}
          horizontal
          
          contentContainerStyle={{ flexGrow: 1 }}
        >
          {slides.map((data, index) => {
            const opacity = interpolate(x, {
              inputRange: [
                (index - 0.5) * width,
                index * width,
                (index + 0.5) * width,
              ],
              outputRange: [0.5, 1, 0.5],
            });

            return (
              <Slider key={index}>
                <Animated.View style={{ opacity }}>
                  <SliderImage src={data.src} />
                  <Box paddingHorizontal="l">
                    <SliderTitle>{data.label}</SliderTitle>
                  </Box>
                </Animated.View>
              </Slider>
            );
          })}
        </Animated.ScrollView>
      </Box>

    </Box>
  );

也插值不起作用。这段代码有什么问题？我已经阅读了文档，它与此代码类似，但我无法弄清楚问题所在

4

0 回答 0