javascript - 如何在 react-native 中插入 Animated 值以生成 bool 值或字符串？

Question

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

'上一个' 如果值为负。

'下一个' 如果值为正。

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 解决方案，您可以使用数学助手将插值强制转换为 bool 值，或者像在 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()允许我们返回 Animated我们想要的任何值的节点。在这种情况下，我使用了真/假，但这些可能是“下一个”和“上一个”之类的字符串。
有了更多的逻辑，这种方法还可以处理零情况，它应该返回一个空字符串。
Docs for cond()