本机Animated.View Gug

时间:2018-06-01 04:27:12

标签: reactjs animation react-native react-animated

每次动画结束后,容器中物品的高度都会降低。 我测试了“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

感谢帮助我!

0 个答案:

没有答案