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

Posted 2023-04-13

【中文标题】不支持 React-native Animation.event 样式属性

【英文标题】：React-native Animation.event style property is not supported

【发布时间】：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

【参考方案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 >....