react-native-animatable-overlay

Installation

npm install --save react-native-animatable-overlay

Animation

动画借用了 react-native-animatable。

为了 API 的优雅，我们把 animation 改成了 name，可用的动画属性如下：

Prop	Default	Type	Description
name	None	string	Name of the animation.
duration	1000	number	For how long the animation will run (milliseconds).
delay	0	number	Optionally delay animation (milliseconds).
direction	normal	string	Direction of animation, especially useful for repeating animations. Valid values: normal, reverse, alternate, alternate-reverse.
easing	ease-in-out	string	Timing function for the animation. Valid values: linear, ease, ease-in, ease-out, ease-in-out.

Example

<Overlay
  style={{backgroundColor: ''}}
  activeOpacity={1}
  statusBarAutoHidden={true}
  visible={this.state.visible}
  onPress={() => {
    this.setState({
      visible: false
    })
  }}
  showAnimation={{
    name: 'fadeIn'
  }}
  hideAnimation={{
    name: 'fadeOut'
  }}
>
  {content}
</Overlay>