LayoutAnimation

当布局变化时，自动将视图运动到它们新的位置上。

一个常用的调用此 API 的办法是在状态更新前调用。

注意如果要在Android上使用此动画，则需要在代码中启用：

import { UIManager } from 'react-native';

if (Platform.OS === 'android') {
  if (UIManager.setLayoutAnimationEnabledExperimental) {
    UIManager.setLayoutAnimationEnabledExperimental(true);
  }
}

上面这段代码应该写在任何组件加载之前，比如可以写到 index.js 的开头。

示例

---

文档

方法

configureNext()

jsx

static configureNext(config, onAnimationDidEnd?, onAnimationDidFail?)

计划下一次布局要发生的动画。

参数：

名称	类型	必需	说明
config	object	是	看下面的说明
onAnimationDidEnd	function	否	动画结束后的回调
onAnimationDidFail	function	否	动画失败后的回调

config

• duration 动画持续时间，单位是毫秒。
• create，配置创建新视图时的动画。（参阅Anim类型）
• update，配置被更新的视图的动画。（参阅Anim类型）

---

create()

jsx

static create(duration, type, creationProp)

用来创建configureNext所需的 config 参数的辅助函数。

示例：

函数式组件

Class 组件

Properties

Types

An enumeration of animation types to be used in the create method, or in the create/update/delete configs for configureNext. (example usage: LayoutAnimation.Types.easeIn)

Types
spring
linear
easeInEaseOut
easeIn
easeOut
keyboard

---

Properties

An enumeration of layout properties to be animated to be used in the create method, or in the create/update/delete configs for configureNext. (example usage: LayoutAnimation.Properties.opacity)

Properties
opacity
scaleX
scaleY
scaleXY

---

Presets

A set of predefined animation config.

Presets	Value
easeInEaseOut	create(300, 'easeInEaseOut', 'opacity')
linear	create(500, 'linear', 'opacity')
spring	{ duration: 700, create: { type: 'linear', property: 'opacity' }, update: { type: 'spring', springDamping: 0.4 }, delete: { type: 'linear', property: 'opacity' } }

---

easeInEaseOut

Shortcut to bind configureNext() methods with Presets.easeInEaseOut.

---

linear

Shortcut to bind configureNext() methods with Presets.linear.

---

spring

Shortcut to bind configureNext() methods with Presets.spring.

Example usage:

函数式组件

Class 组件