Question

我已经使用了几个很好的教程来使用布局动画和本机反应。我似乎无法获得动画这么基本的东西。我试图动画Tab，当它被点击时，弹性尺寸增加但在移动设备中，虽然大小确实增加，但它是静态的并且不应用动画。我正在Android设备上测试它。

Nav.js

import React from 'react';
import { View, LayoutAnimation } from 'react-native';

export class Nav extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            active: 0
        }
    }

    onTabPress(index) {
        // LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
        this.setState({ active: index });
        // LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
    }

    render() {
        return (
            <View style={{ height: 56, elevation: 8, position: 'absolute', left: 0, bottom: 0, right: 0, backgroundColor: this.props.color, flex: 1, flexDirection: 'row' }}>
                {
                    React.Children.map(this.props.children, (child, index) => (
                        React.cloneElement(child, {
                            index: index,
                            active: this.state.active === index,
                            onTabPress: this.onTabPress.bind(this),
                        })
                    ))
                }
            </View>
        );
    }
}

Tab.js（this.props.children如上所示是选项卡列表）

import React from 'react';
import { View, Text, TouchableWithoutFeedback, StyleSheet, Animated, Easing, Platform, LayoutAnimation } from 'react-native';
import Icon from 'react-native-vector-icons/MaterialIcons';

export class Tab extends React.Component {
    constructor(props) {
        super(props);
    }

    componentWillUpdate() {
        // LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
    }

    handlePress() {
        if (this.props.active) return;
        // LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
        this.props.onTabPress(this.props.index);
        // LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
    }

    render() {
        var active = this.props.active ? { flex: 1.75, top: 6 } : { flex: 1, top: 15 };
        return (
            <TouchableWithoutFeedback onPress={this.handlePress.bind(this)}>
                <View style={[active, { alignItems: "center" }]}>
                    <Icon size={this.props.iconSize || 24} color={this.props.color || "white"} name={this.props.iconName} />
                    <Text style={{ color: this.props.color || "white" }}>{this.props.active && this.props.title}</Text>
                </View>
            </TouchableWithoutFeedback >
        );
    }
}

我已经注释掉了LayoutAnimation代码块，以澄清我尝试过的区域。我知道我可能做错了但是我已经按照这些指南进行操作并且它不起作用，所以这里的代码是我试图让它按照我自己的方式工作的尝试。提前谢谢。

https://blog.callstack.io/react-native-animations-revisited-part-i-783143d4884 https://medium.com/@Jpoliachik/react-native-s-layoutanimation-is-awesome-4a4d317afd3e

Answer 1

好吧，似乎我的代码没有任何问题。我继续http://snack.expo.io 在ios上测试这个并且动画工作了。当移动到android时，它的行为与我的Android设备完全一样。之后的快速谷歌搜索引导我这个。 https://github.com/facebook/react-native/issues/5267

基本上，您只需在代码的构造函数中编写以下内容即可。你也可以对它进行进一步的检查，以定义这个代码只能通过使用Platform.OS和if语句在android上运行

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

React Native Layout动画不动画？或者做错了？

1 个答案: