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

Question

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

如果值为负，则为“上一个”。

如果值为正，则为“下一步”。

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

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

更多信息：

this.state.anim从 a 接收它的值PanGesture，我也this.state.anim用于许多其他事情，所以在这里不使用它也是一种耻辱。

Answer 1

对于那些寻找react-native-reanimatedv1.x 解决方案的人，您可以使用数学助手将内插值强制转换为布尔值，或者像 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我们想要的任何值的节点。在本例中，我使用 true/false，但这些可能是“Next”和“Previous”等字符串。

通过更多的逻辑，这种方法还可以处理零情况，它应该返回一个空字符串。

文档用于cond()