React Native reanimated 不适用于插值

Posted 2023-02-19

【中文标题】React Native reanimated 不适用于插值

【英文标题】：React Native reanimated doesn't work with interpolate

【发布时间】：2021-08-19 04:48:07

【问题描述】：

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

【参考方案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,
    ;
  );