我目前正在使用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>
);
也无法插值。这段代码有什么问题?我已经阅读了文档,并且类似于此代码,但是我无法弄清楚问题出在哪里