animation - 在 React Native Animated 中使用 useNativeDriver 时出错

Question

当我使用 useNativeDriver在 React Native 动画中

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" native 驱动程序支持它，因此您的初始值将如下所示:

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>