1

这已经使用 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 的错误，还是我做错了什么？

4

1 回答 1

1

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

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

于 2019-07-31T04:07:40.570 回答