每次动画结束后,容器中物品的高度都会降低。 我测试了“TouchableOpacity”,“View”,“Text”,组件。 除“文字”外,其他组件的高度将会降低,就好像底部有东西并按下它一样。(但实际上没什么)。 我在底部有一个组件,它也使用“Animated.View”但行为正常。 这太奇怪了,所以我来寻求帮助。 我的反应原生版本为0.55
<Animated.View style={{
opacity: this.state.opacityAnima,
marginTop: this.state.headerAnima,
paddingTop: 18,
backgroundColor: 'red',
width: Dimensions.get('screen').width,
height: 58,
justifyContent: 'center',
alignItems: 'center',
flexDirection: 'row',
position: 'absolute',
zIndex: 3,
top: 0,
padding: 0
}}>
<TouchableOpacity>
<Text style={{
zIndex: 100,
padding: 0,
height: 40,
width: 130,
textAlign: 'center',
lineHeight: 40,
}}> fuck 2</Text>
</TouchableOpacity>
<Text style={{
zIndex: 100,
padding: 0,
height: 40,
width: 130,
textAlign: 'center',
lineHeight: 40,
}}> fuck 2</Text>
</Animated.View>
以下是我的动画代码:
Animated.parallel([
Animated.timing(
this.state.opacityAnima,
{
toValue: 0,
}
),
Animated.timing(
this.state.bottomAnima,
{
toValue: -45 * PIXEL_RATE,
}
),
Animated.timing(
this.state.headerAnima,
{
toValue: -58,
}
)
]).start();
此Bug的行为如下: Height reduce
感谢帮助我!