在Android上实现React Native的`maintainVisibleContentPosition`特性
import React, { Component } from 'react';
import { ScrollView, Text } from 'react-native';
class VisibleContentPositionScrollView extends Component {
scrollToTop = (animated) => {
if (this._scrollViewRef && this._scrollViewRef.scrollToOffset) {
this._scrollViewRef.scrollToOffset({ x: 0, y: 0, animated });
}
};
render() {
return (
<ScrollView
ref={(ref) => { this._scrollViewRef = ref; }}
maintainVisibleContentPosition={{ minIndexForVisible: 0 }}
onScrollBeginDrag={this.scrollToTop.bind(this, false)} // 滚动开始时调用,滚动到顶部,不使用动画
onMomentumScrollEnd={this.scrollToTop.bind(this, true)} // 滚动结束时调用,滚动到顶部,使用动画
>
{/* 内容 */}
<Text>...</Text>
</ScrollView>
);
}
}
export default VisibleContentPositionScrollView;
这段代码定义了一个自定义的ScrollView
组件,它会在用户开始滚动时将内容滚动到顶部,并在滚动结束时再次滚动到顶部,但这次允许动画过程。这是一个简化版的例子,主要展示了如何在React Native中实现类似maintainVisibleContentPosition
的行为。
评论已关闭