Question

我在Animated.event上遇到问题，在scroll事件上有插值。当我使用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

React 16.0.0-alpha.3

在RN 0.42中也存在问题。

Answer 1

此错误来自React Native lib中的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是。

Answer 2

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

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

Using Native Driver for Animated

Answer 3

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

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

Answer 4

只需设置 useNativeDriver：true

到

useNativeDriver：flase

然后一切都会正常进行。

我遇到了同样的问题。.ANd

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

4 个答案: