当列表视图滚动时,我将尝试在“动作按钮”中添加动画,按钮隐藏/显示,但是当按钮隐藏/显示时,我将尝试制作按钮向上/向下动画。像这样...
import ActionButton from 'react-native-action-button';
{this.state.isActionButtonVisible ? <ActionButton /> : null}
和我的滚动事件
_onScroll = event => {
// Simple fade-in / fade-out animation
const CustomLayoutLinear = {
duration: 200,
create: {
type: LayoutAnimation.Types.linear,
property: LayoutAnimation.Properties.opacity,
},
update: {
type: LayoutAnimation.Types.linear,
property: LayoutAnimation.Properties.opacity,
},
delete: {
type: LayoutAnimation.Types.linear,
property: LayoutAnimation.Properties.opacity,
},
};
// Check if the user is scrolling up or down by confronting the new scroll position with your own one
const limit = this._listViewContentHeight - this._listViewHeight;
const offset = event.nativeEvent.contentOffset.y;
const currentOffset = offset > limit ? limit : offset;
const direction =
currentOffset > 0 && currentOffset >= this._listViewOffset
? 'down'
: 'up';
// If the user is scrolling down (and the action-button is still visible) hide it
const isActionButtonVisible = direction === 'up';
if (isActionButtonVisible !== this.state.isActionButtonVisible) {
LayoutAnimation.configureNext(CustomLayoutLinear);
this.setState({ isActionButtonVisible });
}
// Update your scroll position
this._listViewOffset = currentOffset;
};