【发布时间】：2017-11-12 11:58:58
【问题描述】：
我有一个水平的 FlatList，每次到达末尾时，它都会自动将新元素添加到列表中，因此它是一个无限列表。我希望应用程序自动滚动列表，而用户仍然必须能够来回滚动。这就是我要走的路
export default class ImageCarousel extends Component {
constructor(props) {
super(props);
this.scrollX = 0;
this.offset = new Animated.Value(0);
this.scrollTo = this.scrollTo.bind(this);
this.handleScroll = this.handleScroll.bind(this);
this.stopAnimation = this.stopAnimation.bind(this);
// Listener to call the scrollToOffset function
this.offset.addListener(this.scrollTo);
}
_scroller() {
toValue = this.scrollX + 10; // Scroll 10 pixels in each loop
this.animation = Animated.timing(
this.offset,
{
toValue: toValue,
duration: 1000, // A loop takes a second
easing: Easing.linear,
}
);
this.animation.start(() => this._scroller()); //Repeats itself when done
}
scrollTo(e) {
this.carousel.scrollToOffset({offset: e.value});
}
handleScroll(event) {
// Save the x (horizontal) value each time a scroll occurs
this.scrollX = event.nativeEvent.contentOffset.x;
}
componentDidMount() {
this._scroller();
}
render() {
return (
<View>
<FlatList
ref={el => this.carousel = el}
data={someData}
renderItem={renderFunction}
horizontal={true}
keyExtractor={someKeyFunction}
onEndReached={loadMoreElementsFunction}
onScroll={this.handleScroll}
/>
</View>
);
}
}
它在自动滚动列表的意义上起作用，但是问题是我无法手动滚动列表，因为滚动位置由 scrollTo 侦听器不断更新。我试图添加一个 onPress 回调以在按下 FlatList 时禁用动画，但是我无法让它工作。
【问题讨论】：
-
好问题！你找到答案了吗？
-
不幸的是，我最终禁用了自动滚动。所以如果有人有解决方案，我会很高兴看到它。
标签： reactjs react-native react-native-flatlist