React Native reanimated 不适用于插值答案

【问题标题】：React Native reanimated doesn't work with interpolateReact Native reanimated 不适用于插值
【发布时间】：2021-08-19 04:48:07
【问题描述】：

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

【问题讨论】：

标签： reactjs react-native react-native-reanimated

【解决方案1】：

请查看此文档。

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]
);

【讨论】：

我已经检查过了，我以前使用过 Animated API，但我现在不明白是什么问题..
react-native-reanimated 1 是否已过时，是否应该坚持使用第二版？
是的，Worklets 比声明式 api 好得多。
感谢您的建议。我仍然希望有人能帮助我解决这个问题，它真的很困扰我
添加了一些我想让你尝试的例子。

【解决方案2】：

我设法找到了问题。react-native-reanimated 的版本是 2.2.0，我安装了 1.12.0 的版本，终于可以工作了

【讨论】：

【解决方案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 线程来执行动画?

【讨论】：

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

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

【讨论】：

【解决方案5】：

使用 interpolate 的变量应该在 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,
    };
  });

【讨论】：