不支持 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 - 一切正常。

安卓加速_x86 API 23

RN 0.43.0-rc.4

反应 16.0.0-alpha.3

RN 0.42 中也存在问题。

原文由 Артем Васильев 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

为动画使用本机驱动程序

原文由 Tapani 发布，翻译遵循 CC BY-SA 3.0 许可协议