3

当我useNativeDriver在 React Native Animated 中使用时

state = {
    chevronUp: new Animated.Value(-50),
};

Animated.spring(this.state.chevronUp, {
    toValue: 50,
    friction: 5,
    useNativeDriver: true,  // <----- this line
}).start();

并渲染

<Animated.View style={{bottom: this.state.chevronUp,position: "absolute", right: 20, width: 50, height: 50}}>
    <Icon name="chevron-up" size={28} color="#666"/>
</Animated.View>

这些错误给了我

本机动画模块不支持样式属性“底部”

和

无法在未安装的组件上调用 setState（或 forceUpdate）。这是一个空操作，但它表明您的应用程序中存在内存泄漏。要修复，请取消 componentWillUnmount 方法中的所有订阅和异步任务。

4

2 回答 2

9

您需要使用"translateY"属性而不是"bottom"本机驱动程序支持的属性，因此您的初始值将如下所示：

state = {
    chevronUp: new Animated.Value(50),
}

Animated.spring(this.state.chevronUp, {
    toValue: -50,
    friction: 5,
    useNativeDriver: true,  // <----- this line
}).start();

在渲染方法中：

<Animated.View style={{translateY: this.state.chevronUp,position: "absolute", right: 20, width: 50, height: 50}}>
    <Icon name="chevron-up" size={28} color="#666"/>
</Animated.View>
于 2019-04-11T17:03:58.123 回答
2

此错误来自React Native 库中的validateTransformTRANSFORM_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,
};

你最好使用translateY而不是bottom这里。

<Animated.View style={{translateY: this.state.chevronUp,position: "absolute", right: 20, width: 50, height: 50}}>
     <Icon name="chevron-up" size={28} color="#666"/>
</Animated.View>
于 2020-03-08T10:35:26.617 回答