LayoutAnimation在安卓上无效

来源:9-12 LayoutAnimation 超级简单又强大的布局动画

MC_inR067

2024-11-07

我的代码
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,
    },
});

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

写回答

4回答

vscode

2024-12-30

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

1
2
MC_inR067
关闭架构,具体看我的回答
2025-02-26
共2条回复

FE大公爵

2024-11-23

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

0
2
FE大公爵
回复
MC_inR067
我也是0.76,华为的mate,具体型号忘了,但是很新的手机。实在不行你录个视频发qq课程群里
2024-11-26
共2条回复

everett_fan

2024-11-07

我也一样,不生效

0
7
FE大公爵
回复
everett_fan
你尝试把我的代码拷贝到你工程中运行呢?如果我的代码是ok的,那就对比下你的代码什么地方写错了,如果我的代码在你的工程不行,那就是工程配置不对。
2025-01-02
共7条回复

RN从0到1系统精讲与小红书APP实战

30+小案例+2个实战项目,快人一步提升个职业竞争力

295 学习 · 211 问题

查看课程