如何在React Native中将动画值插值为布尔值或字符串？

Question

我恰好有一个从-1到1的动画，我想将这些值翻译为以下两个字符串：

'Previous' 如果值为负数。

'Next' 如果值为正数。

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

问：如何利用this.state.anim的值来决定是前进到下一个屏幕还是返回上一个屏幕？

更多信息：

this.state.anim从PanGesture接收其值，我还使用this.state.anim进行许多其他操作，因此在这里不使用它将是一种浪费。

- SudoPlz

---

你得到了答案吗？ - Dester Dezzods

不，我认为这是不可能的。相反，我只使用了两个单独的标签，一个用于“上一页”，另一个用于“下一页”，并分别进行了两个插值。 - SudoPlz

Answer 1

对于那些寻找 react-native-reanimated v1.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()的文档

- Chris Dolphin

---

感谢您抽出时间回答，我没有测试过那个解决方案（因为我已经不在那个项目上了），但看起来它应该可以工作。 - SudoPlz