React Native重置动画与插值函数不兼容。

Question

我尝试使用 Animated.interpolate，但是出现了一个奇怪的错误，我从未遇到过。如何解决？谢谢。

- Vlad Ghetina

Answer 1

使用插值的变量应该放在 useAnimatedStyle 内。

const positionX = useSharedValue(-40);
const animatedStyles = useAnimatedStyle(() => {
    const opacity = interpolate(positionX.value, [-40, 0], [0, 1]); // <- It must be here to work.
    return {
      transform: [{ translateX: positionX.value }],
      opacity,
    };
  });

- Mateus Marinho

Answer 2

如果您从版本1升级到版本2.X，则需要将interpolate重命名为interpolateNode。

更多信息请参见：https://docs.swmansion.com/react-native-reanimated/docs/2.2.0/migration/#1-interpolate-renamed-to-interpolatenode。

- EigenFool

Answer 3

尝试在不命名inputRange或outputRange的情况下进行如下操作：

import { useSharedValue, interpolate } from 'react-native-reanimated' // version 2.x

const animatedValue = useSharedValue(0)

const interpolatedValue = interpolate(
  animatedValue.value,
  [valueMin, valueMax],
  [interpolatedValueMin, interpolatedValueMax]
)

注意：为了更好的用户体验，请使用react-native-reanimated，它使用UI线程执行动画，而不是JS线程。

- Thomas Dittmar

Answer 4

import Animated,{interpolate} from 'react-native-reanimated';

const scale = interpolate(progress, {
    inputRange: [0, 1],
    outputRange: [1, 0.8],
  });

const borderRadius = interpolate(progress, {
    inputRange: [0, 1],
    outputRange: [0, 10],
  });

当我这样做时，我的问题得到了解决

- yaren hilal ürkmez

Answer 5

请查看此文档。

https://docs.swmansion.com/react-native-reanimated/docs/1.x.x/event

https://docs.swmansion.com/react-native-reanimated/docs/1.x.x/code

https://docs.swmansion.com/react-native-reanimated/docs/1.x.x/nodes/interpolate

试一下这个。

Animated.useCode(
  () =>
    [
      //...
      Animated.interploate(...),
    ],
  [animated, offset]
);

- Zhang TianYu

---

我已经检查过了，我之前已经使用过Animated API，我只是不明白现在出了什么问题。 - Vlad Ghetina

React-Native-Reanimated 1是否已经过时，应该转向第二个版本？ - Vlad Ghetina

是的，Worklets比声明式API好得多。 - Zhang TianYu

谢谢你的建议。我仍然希望有人能够帮助我解决这个问题，它真的让我很困扰。 - Vlad Ghetina

添加了一些示例，我希望你可以尝试。 - Zhang TianYu

Answer 6

我成功找到了问题所在。react-native-reanimated 的版本是 2.2.0，我安装了 1.12.0 的版本，现在终于可以工作了。

- Vlad Ghetina