在 React Native Animated 中使用 useNativeDriver 时出错

Question

当我在 React Native Animated 中使用 useNativeDriver 时

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>

这些错误给我

Style property 'bottom' is not supported by native animated module

和

Can't call setState (or forceUpdate) on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.

Answer 1

您需要使用 "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>

Answer 2

此错误来自 validateTransform function inside React Native lib.You can check the TRANSFORM_WHITELIST in 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>

在 React Native Animated 中使用 useNativeDriver 时出错

Error when use useNativeDriver in React Native Animated

animation

react-native

react-animated