在 React Native Animated 中使用 useNativeDriver 时出错答案

【问题标题】：Error when use useNativeDriver in React Native Animated在 React Native Animated 中使用 useNativeDriver 时出错
【发布时间】：2018-06-25 06:59:39
【问题描述】：

当我在 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>

这些错误给了我

原生动画模块不支持样式属性“底部”

和

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

【问题讨论】：

您将此动画应用到哪个属性？您可以添加一些示例代码和上下文来显示您在哪里使用它吗？并非所有属性都是可动画的...
您能分享一下这段动画代码在组件生命周期中运行的位置吗？
同样的错误，你找到解决办法了吗？

标签： animation react-native react-animated

【解决方案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>

【讨论】：

【解决方案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,
};

您最好在这里使用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>

【讨论】：

如果我有多输入，我应该为每个位置声明多个变量吗？
对不起，听不懂你