react-native - useState 函数似乎阻止了 Animated.timing 事件？

Question

这个按钮很简单，当按下时，它会触发一个带有动画事件的函数:

  const toggleOpen = () => {
    if (this._open) {
      Animated.timing(animState.animation, {
        toValue: 0,
        duration: 300,
      }).start();
    } else {
      Animated.timing(animState.animation, {
        toValue: 1,
        duration: 300,
      }).start(); // putting '() => setFirstInteraction(true)' here causes RenderItems to disappear after the animation duration, until next onPress event.
    }
    this._open = !this._open;
  };

这是调用此函数的按钮:

  <TouchableWithoutFeedback
    onPress={() => {
      toggleOpen();
      // setFirstInteraction(true); // this works here, but the button doesn't toggleOpen until the 3rd + attempt.
    }}>
    <Animated.View style={[
      styles.button, 
      styles.buttonActiveBg,
      ]}>
      <Image
        style={styles.icon}
        source={require('./assets/snack-icon.png')}
      />
    </Animated.View>
  </TouchableWithoutFeedback>

我需要添加第二个 useState 函数，它与 toggleOpen(); 同时调用。您可以在上面看到我在使用我所指的 setFirstInteraction(true) useState 函数时遇到的问题。

逻辑上这应该有效，但由于某些原因，当我添加 setFirstInteraction(true) 时，它似乎阻止了 toggleOpen() 函数。如果您坚持并按下按钮几次，最终 toggleOpen() 将完全按预期工作。我的问题是，为什么会发生这种阻塞类型的操作？

您可以在我的小吃中重现该问题:https://snack.expo.dev/@dazzerr/topicactionbutton-demo .请使用设备。 Web 预览没有问题，但在 iOS 和 Android 上都存在问题。您将在第 191 行看到 setFirstInteraction(true) 实例。

Answer 1

您的 animatedValue 不稳定。这导致它在每次状态更改时重新创建。建议改用 useRef(不过，useMemo 也可以解决这个问题)。

const animState =  useRef(new Animated.Value(0)).current;

您的toggleOpen 函数也可以简化。事实上，您只需要一个状态来处理您想要的内容并在 useEffect 中对其使用react以触发您已实现的动画。

我已将此状态称为 isOpen，并且已删除所有其他状态。 toggleOpen 函数只是切换此状态。

const [isOpen, setIsOpen] = useState(false)

const toggleOpen = () => {
  setIsOpen(prev => !prev)
}

在 useEffect 中，我们对状态变化使用react并触发正确的动画。

const animState =  useRef(new Animated.Value(0)).current;

  useEffect(() => {
    Axios.get('https://www.getfretwise.com/wp-json/buddyboss/v1/forums')
      .then(({ data }) => setData(data))
      .catch((error) => console.error(error));
  }, []);

  useEffect(() => {
    Animated.timing(animState, {
          toValue: isOpen ? 1 : 0,
          duration: 300,
          useNativeDriver: true,
    }).start();
  }, [isOpen, animState])

我已经调整了你的零食。 Here is a working version .

备注:当然，您仍然需要从 API 获取数据。按钮的不透明度变化仍然相同，并且在获取数据之前一直处于禁用状态。