不支持 React-native Animation.event 样式属性

Question

我对 Animated.event 有问题，在滚动事件上进行插值。当我使用 Animated.event 时

useNativeDriver: true

我收到下一个错误：

Style property 'height' is not supported by native animated module

如果我使用opacity财产 - 它工作正常。

我的代码：

render() {
        this.yOffset = new Animated.Value(0);

        let event = Animated.event([
            {
                nativeEvent: {
                    contentOffset: {
                        y: this.yOffset
                    }
                }
            }
        ], {useNativeDriver: true});

        let opacity = this.yOffset.interpolate({
            inputRange: [0, 120],
            outputRange: [1, 0],
        });

        let height = this.yOffset.interpolate({
            inputRange: [0, 180],
            outputRange: [200, 100],
        });

        return (
            <View>
                <Header
                    style={{
                        opacity,
                        height
                    }}
                />


                <ScrollView
                    style={[
                        {
                            flexDirection: "column"
                        }
                    ]}
                    scrollEventThrottle={1}
                    onScroll={event}
                >

                    // some content

                </ScrollView>
            </View>
        );
    }

opacity - 作品。

height - 没有用。

没有useNativeDriver: true- 一切正常。

Android Accelerated_x86 API 23

RN 0.43.0-rc.4

反应 16.0.0-alpha.3

问题也存在于 RN 0.42 中。

Answer 1

正如 React Native 文档所说，您只能为非布局属性设置动画。Transform支持属性，因此您可以使用transform.scaleY而不是更改height.

Native Animated 目前并非支持您使用 Animated 执行的所有操作。主要限制是您只能为非布局属性设置动画，transform、opacity 和 backgroundColor 之类的东西会起作用，但 flexbox 和 position 属性不会。

使用本机驱动程序制作动画

Answer 2

此错误来自React Native 库中的validateTransform函数。您可以TRANSFORM_WHITELIST在NativeAnimatedHelper 中查看动画模块支持的属性。

目前，支持这些道具

const TRANSFORM_WHITELIST = {
  translateX: true,
  translateY: true,
  scale: true,
  scaleX: true,
  scaleY: true,
  rotate: true,
  rotateX: true,
  rotateY: true,
  rotateZ: true,
  perspective: true,
};

“高度”不在TRANSFORM_WHITELIST；scaleY是。

Answer 3

只是改变：

useNativeDriver: true

到

useNativeDriver: false