我已经在过去的两天里一直在尝试解决这个问题,这个问题在iOS上运行得很好。
constructor(){
super();
this.animation = new Animated.Value(0)
this.state = {
expanded: false,
};
}
toggle(){
let initialValue = this.state.expanded? 1 : 0 ,
finalValue = this.state.expanded? 0 : 1
this.setState({
expanded: !this.state.expanded,
});
this.animation.setValue(initialValue)
Animated.timing(
this.animation,
{
toValue: finalValue,
}
).start();
}
render(){
return(
<Animated.View style={{{flex: 1, marginTop: 28, paddingLeft: 25, transform: [{ scale: this.animation }, {perspective: 1000 }]}}}>
....
</Animated.View>
);
}
这个组件是子组件,在父组件中像这样使用:
<FeedBack ref={ref => this.feedback = ref}/>
,没有任何条件来检查是否显示(因为在构造函数中将动画缩放设置为零,所以不需要)。当按钮按下时,
toggle()
方法从父组件中调用。现在,在iOS上运行良好,在组件加载时,视图不存在,直到按下按钮(然后缩放)。但是在Android上,组件加载时,视图已经存在。当我按下按钮时,动画视图会消失并重新出现(带有动画缩放),后续的切换运行正常。问题在于,即使缩放的
initialValue
为零,当它首次加载时,视图仍然存在。
const parentRef = useRef(new Animated.Value(.01)); Animated.timing(parentRef.current, { toValue, duration: 200, useNativeDriver: false, easing: Easing.bezier(.5,1.2,1,1) });
style={[{
width: parentRef.current.interpolate({
inputRange: [0, 1],
outputRange: [autoScale(100), autoScale(50)],
}),
}]}
>
- master_dodo