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入口文件也加了开启,请问怎么弄,
122025-02-26 -
FE大公爵
2024-11-23
我试了你的代码,是正常的,我用的是安卓测试机,RN的新版本老版本都可以。你是不是工程有其它地方报错,导致js执行失败了。或者你的模拟器问题。
022024-11-26 -
everett_fan
2024-11-07
我也一样,不生效
072025-01-02