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

【问题标题】：React-native Animation.event style property is not supported不支持 React-native Animation.event 样式属性
【发布时间】：2017-08-18 17:40:41
【问题描述】：

我对 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 中也存在问题。

【问题讨论】：

你还有同样的问题吗？ :D

标签： android reactjs animation react-native

【解决方案1】：

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

目前，并非您可以使用 Animated 进行的所有操作都支持原生动画。主要限制是您只能制作动画非布局属性，例如变换、不透明度和 backgroundColor 可以工作，但 flexbox 和 position 属性不行。

Using Native Driver for Animated

【讨论】：

我想哭。从字面上看。
这只是说明 RN 还不是 1.0，而是 0.43。还有很多工作要做。
在 RN 60.1.4 中没有更新，好在height 在没有原生驱动的情况下在 ios 中工作顺利。
@ToraCode 在看到您的评论之前，我正要使用transform.scaleY 方法。现在，我只需要更改一行代码。不错。

【解决方案2】：

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

目前支持这些道具

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

'height' 不在TRANSFORM_WHITELIST 中； scaleY 是。

【讨论】：

允许的东西更多，该白名单仅与可用的转换有关。请参阅以下链接了解每个受支持的属性：github.com/facebook/react-native/blob/master/Libraries/Animated/…

【解决方案3】：

只是改变：

useNativeDriver: true

到

useNativeDriver: false

【讨论】：

【解决方案4】：

您可以使用另一个属性，使用手势处理程序，在带有 PanGestureHandler API 的 react-native-gesture 处理程序上有一个示例：

<Animated.View style={{bottom: 0, transform: [{ translateY: this._translateY },] }}>...
  <PanGestureHandler>...
    <Animated.View>...
      <View >....

【讨论】：