LayoutAnimation在安卓上无效

Question

我的代码
index

/**
 * @format
 */

import { AppRegistry, Platform, UIManager } from 'react-native';
import App from './App';
import { name as appName } from './app.json';

if (Platform.OS === 'android') {
    if (UIManager.setLayoutAnimationEnabledExperimental) {
        UIManager.setLayoutAnimationEnabledExperimental(true);
        console.log("LayoutAnimation enabled for Android");
    } else {
        console.log("LayoutAnimation enabling failed or not supported");
    }
}


AppRegistry.registerComponent(appName, () => App);

Anim10

import React, { useState } from 'react';
import {
    StyleSheet,
    View,
    Button,
    LayoutAnimation,
    Image,
    Text,
    UIManager,
} from 'react-native';
import icon_avatar from '../assets/images/default_avatar.png';

export default () => {

    const [showView, setShowView] = useState(false);
    const [showRight, setShowRight] = useState(false);

    return (
        <View style={styles.root}>
            <Button
                title="按钮"
                onPress={() => {
                    // LayoutAnimation.configureNext(LayoutAnimation.Presets.linear);
                    // 配置动画
                    LayoutAnimation.configureNext(LayoutAnimation.Presets.spring, () => {
                        console.log(`动画执行完毕`);//打印了
                    }, () => {
                        console.log(`动画执行失败`);
                    });
                    // setShowView(!showView);
                    setShowView(true);
                    // 切换状态
                    // setShowRight(!showRight);
                }}
            />
            {showView && <View
                style={[
                    styles.view,
                    {
                        flexDirection: showRight ? 'row-reverse' : 'row',
                        // marginHorizontal: showRight ? 20 : 0, // 改变 margin 触发动画
                    },
                ]}
            >
                <Image style={styles.img} source={icon_avatar} />
                <Text style={styles.txt}>这是一行自我介绍的文本</Text>
            </View>}

        </View>
    );
};

const styles = StyleSheet.create({
    root: {
        width: '100%',
        height: '100%',
        backgroundColor: 'white',
        justifyContent: 'center',
        alignItems: 'center',
    },
    view: {
        width: '100%',
        height: 100,
        backgroundColor: '#F0F0F0',
        marginTop: 20,
        flexDirection: 'row',
        alignItems: 'center',
        paddingHorizontal: 16,
    },
    img: {
        width: 64,
        height: 64,
        borderRadius: 32,
    },
    txt: {
        fontSize: 20,
        color: '#303030',
        fontWeight: 'bold',
        marginHorizontal: 20,
    },
});

然后不管怎么设置，手机上都没有效果。

Answer 1

vscode 2024-12-30 08:22:11

我这也一样，试了好几次，这个布局动画，就是没有效果，index.js入口文件也加了开启，请问怎么弄，

Answer 2

FE大公爵 2024-11-23 10:43:13

我试了你的代码，是正常的，我用的是安卓测试机，RN的新版本老版本都可以。你是不是工程有其它地方报错，导致js执行失败了。或者你的模拟器问题。

• 提问者 MC_inR067 #1

  老师我的RN版本是0.76，然后运行在Android13真机小米上。
  你的运行环境是那种呢

• FE大公爵 回复 提问者 MC_inR067 #2

  我也是0.76，华为的mate，具体型号忘了，但是很新的手机。实在不行你录个视频发qq课程群里

Answer 3

everett_fan 2024-11-07 19:32:50

我也一样，不生效

• 提问者 MC_inR067 #1

  哥们你找到解决办法了吗？

• everett_fan 回复 提问者 MC_inR067 #2

  回复 MC_inR067：没有哦

• FE大公爵 #3

  我用了上面的代码运行，是正常的。在上面回复了，你的代码也可以贴出来看看。

点开查看后面4条评论