React native 在安装组件后对本机布局动画弹簧动画作出反应

当组件（MenuBtn）挂载时，我想以弹簧弹出的方式将按钮的大小从0增加到50。但我不得不面对以下问题：

不仅菜单项会设置动画，而且文本组件（“标题”）也会设置动画

第一个挂载动画不是弹簧类型，而是以一种淡入淡出的方式。但是showMenu（）以弹簧类型设置动画

我错过了什么？如何在加载菜单时只弹出菜单，而不是所有组件

export default class App extends React.Component {
    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.header}>Heading</Text>
                <View style={styles.wrapper}>
                    <MenuBtn/>
                </View>
            </View>
        )
    }
}

class MenuBtn extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            radius: 0,
            degree: '0deg',
        };
    }

    componentDidMount() {
        LayoutAnimation.spring();
        this.setState({
            radius: 50,
        });
    }

    showMenu = () => {
        LayoutAnimation.spring();
        this.setState({
            radius: this.state.radius == 60 ? 50 : 60,
            degree: this.state.degree == '45deg' ? '0deg' : '45deg',
        })
    };

    render() {
        return (
            <TouchableWithoutFeedback onPress={this.showMenu}>
                <View style={{ width: this.state.radius, height: this.state.radius, borderRadius: this.state.radius/2, transform: [{rotateZ: this.state.degree}],}}>
                    <Icon name="plus" size={30} color="white"/>
                </View>
            </TouchableWithoutFeedback>
        )
    }
}

导出默认类App扩展React.Component{
render（）{
返回(
标题
)
}
}
类MenuBtn扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
半径：0，
度：“0度”，
};
}
componentDidMount（）{
layoutimation.spring（）；
这是我的国家({
半径：50，
});
}
showMenu=（）=>{
layoutimation.spring（）；
这是我的国家({
半径：this.state.radius==60？50:60，
度：this.state.degree==“45度”？“0度”：“45度”，
})
};
render（）{
返回(
)
}
}

布局动画API使用简单，但没有提供很多可定制性。当您调用

layoutimation.spring（）

或任何其他layoutimation方法时，实际上是在说“动画此渲染周期中发生的所有UI更改”

相反，您可以使用API获得对动画类型和目标的更多控制。因为它是一个较低级别的API，所以需要更多的代码

对于像这样的简单转换，我建议使用优秀的库，它使条目转换与将元素包装在可设置动画的

视图中一样简单。查看
并指定许多可用转换中的一个：

<Animatable.View animation='bounceIn'>
  // your component
</Animatable.View>


//您的组件
对于1-尝试使用
layoutimation.configureNext
insread.@NirH抱歉，但这没有帮助。好的！而且本地动画看起来很有希望。