如何插入一个动画值以在反应本机中生成布尔值或字符串？

Question

我碰巧有一个从 -1 到 1 的动画，我想将这些值转换为以下 2 个字符串：

'Previous' 如果值为负数。

'Next' 如果值为正。

this.state.anim.interpolate({
    inputRange: [-1, 0, 1],
    outputRange: ['Previous','', 'Next'],
})

问：我如何使用 this.state.anim 包含的值来决定我们是进入下一个屏幕还是上一个屏幕。

更多信息：

this.state.anim 从 PanGesture 接收它的值，我也将 this.state.anim 用于许多其他事情，所以不在这里也使用它会很遗憾。

Answer 1

对于那些寻找 react-native-reanimated v1.x 解决方案的人，您可以使用 Math 助手将内插值强制转换为布尔值，或者像 OP 的情况一样，转换为字符串：


const interpolated = Animated.interpolate(
  value,
  {
    inputRange: [-1, 1],
    outputRange: [0, 1],
  },
);

const interpolatedAsInteger = Animated.round(interpolated);

const boolean = Animated.cond(
  interpolatedAsInteger,
  new Animated.Value(true),
  new Animated.Value(false),
);

此示例使用 round() 将插值强制为 0 或 1。然后 cond() 允许我们 return 一个 Animated 节点的任何我们想要的值.在这种情况下，我使用了 true/false，但这些可能是像“Next”和“Previous”这样的字符串。

有了更多的逻辑，这种方法也可以处理零的情况，这应该是 return 一个空字符串。

Docs for cond()

如何插入一个动画值以在反应本机中生成布尔值或字符串？

How can I interpolate a Animated value to result into a boolean or a string in react-native?

javascript

animation

reactjs

react-native

react-animated