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>