React Native的Animated.ScrollView不允许以编程方式滚动到某个位置是由于Animated.ScrollView组件本身的限制导致的。该组件使用了动画驱动的滚动方式,而不是直接操作滚动位置。
要实现以编程方式滚动到某个位置,可以考虑使用React Native提供的其他滚动组件,例如ScrollView或FlatList。这些组件支持通过编程方式设置滚动位置。
如果你想要使用Animated.ScrollView,并且需要以编程方式滚动到某个位置,可以尝试以下解决方案:
import { useRef } from 'react';
import { Animated } from 'react-native';
const scrollViewRef = useRef(null);
const scrollToPosition = (position) => {
scrollViewRef.current.scrollTo({ y: position });
};
return (
<Animated.ScrollView ref={scrollViewRef}>
{/* Scrollable content */}
</Animated.ScrollView>
);
import { useRef } from 'react';
import { Animated, PanResponder } from 'react-native';
const CustomScrollView = () => {
const scrollY = useRef(new Animated.Value(0)).current;
const panResponder = useRef(
PanResponder.create({
onStartShouldSetPanResponder: () => true,
onPanResponderMove: (_, gestureState) => {
scrollY.setValue(-gestureState.dy);
},
onPanResponderRelease: (_, gestureState) => {
Animated.spring(scrollY, {
toValue: 0,
velocity: gestureState.vy,
tension: 2,
friction: 2,
useNativeDriver: true,
}).start();
},
})
).current;
return (
<Animated.View
{...panResponder.panHandlers}
style={{
transform: [{ translateY: scrollY }],
}}
>
{/* Scrollable content */}
</Animated.View>
);
};
return <CustomScrollView />;
这些解决方案可以帮助你实现在Animated.ScrollView中以编程方式滚动到指定位置。但需要注意的是,Animated.ScrollView的滚动机制和其他滚动组件可能存在差异,具体取决于你的使用场景和需求。
没有搜到相关的沙龙
领取专属 10元无门槛券
手把手带您无忧上云