React Native 的 LayoutAnimation 仅对 UI 中的一些元素进行动画处理，其他元素会跳转

Question

这已经使用 React Native 0.59 和 0.60.4（最新）进行了测试：

如您所见，除了标题之外的所有内容都是动画的，它只是跳到它的新位置。

这是通过以下代码创建的：

import React, { Component } from 'react';
import {
    SafeAreaView,
    StyleSheet,
    View,
    Text,
    TouchableOpacity,
    LayoutAnimation,
} from 'react-native';

export class App extends Component {

    constructor() {
        super();

        this.state = {
            expanded: false,
        }
    }

    render () {
        let headerStyle = Object.assign({}, styles.header);
        if (this.state.expanded) {
            headerStyle.height = 90;
        }
        return (
            <View style={styles.container}>
                <SafeAreaView></SafeAreaView>
                <View style={headerStyle}>
                    <Text style={styles.headerText}>My Title</Text>
                    <TouchableOpacity style={styles.expandButton} onPress={() => this.toggle()}>
                        <Text>
                            Animate
                        </Text>
                    </TouchableOpacity>
                </View>
                <View style={styles.list}>
                    <TouchableOpacity key={"1"} style={styles.listitem}>
                        <Text>Item 1</Text>
                    </TouchableOpacity>
                    <TouchableOpacity key={"2"} style={styles.listitem}>
                        <Text>Item 2</Text>
                    </TouchableOpacity>
                </View>
            </View>
        );
    }

    toggle() {
        LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
        this.setState({
            expanded: !this.state.expanded,
        })
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'flex-start',
        alignItems: 'stretch',
        backgroundColor: 'white',
    },
    header: {
        height: 120,
        //backgroundColor: 'red',
        justifyContent: 'flex-end',
    },
    headerText: {
        padding: 20,
        fontSize: 24,
        //backgroundColor: 'orange',
    },
    expandButton: {
        height: 40,
        borderRadius: 20,
        position: 'absolute',
        right: 15,
        bottom: 10,
        paddingHorizontal: 10,
        paddingVertical: 9,
    },
    list: {
        flex: 1,
        justifyContent: 'flex-start',
        alignItems: 'stretch',
        backgroundColor: 'white',
    },
    listitem: {
        height: 50,
        paddingHorizontal: 20,
        paddingVertical: 10,
    },
});

export default App;

这是 React Native 的错误，还是我做错了什么？

Answer 1

LayoutAnimation 处理元素位置的动画 - 因为您正在更改 header 的高度，所以它的位置没有改变。您必须在 state.expanded 上以 header 元素更改其位置而不是其高度的方式更新渲染树。 header 的高度变化会导致其他元素的位置发生变化，这就是它适用于它们的原因。

我相信在 header 视图上方添加一个改变其高度的间隔视图而不是 header 视图本身会起作用。

React Native 的 LayoutAnimation 仅对 UI 中的一些元素进行动画处理，其他元素会跳转

React Native's LayoutAnimation animates only some of the UI elements, others jump

animation

layout-animation

react-native