反应本机ScrollView onScroll侦听器不起作用

时间:2020-09-18 09:51:08

标签: react-native scrollview react-native-reanimated

我目前正在使用React Native来开发一个新的屏幕应用程序,但是滚动视图有问题。

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>
  );

也无法插值。这段代码有什么问题?我已经阅读了文档,并且类似于此代码,但是我无法弄清楚问题出在哪里

0 个答案:

没有答案