反应本机操作按钮滚动隐藏隐藏自下而上的动画

时间:2018-07-19 06:02:47

标签: react-native

当列表视图滚动时,我将尝试在“动作按钮”中添加动画,按钮隐藏/显示,但是当按钮隐藏/显示时,我将尝试制作按钮向上/向下动画。像这样... enter image description here

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;

};

0 个答案:

没有答案