React Native：在 Animated.View 中调用 onPress 函数时禁用动画答案

【问题标题】：React Native: Disable animations when onPress function is called inside Animated.ViewReact Native：在 Animated.View 中调用 onPress 函数时禁用动画
【发布时间】：2021-09-10 07:48:06
【问题描述】：

我有一个动画视图堆栈，其中包含一个可以导航到另一个屏幕的 Pressable 组件。但是当我按下按钮时，导航会在容器动画之后发生。我想让它变得即时。

<Animated.View>
  <Animated.View style={[styles.headerContainer, titleStyle]}>
    <Animated.Text style={styles.verificationTitle}>
      {activationBoxTitle}
    </Animated.Text>
    <ArrowRightWhite />
  </Animated.View>
  <Animated.View style={[styles.container, descriptionContainerStyle]}>
    <ImageBackground
      style={styles.backgroundImage}
      resizeMode="cover"
      source={images.activateAccBackground}
    >
      <Pressable
        onPress={() => navigation.navigate(
          "GeneralQuestions", {
            screen: navigateActivationToPage
          })}
      >
        <Animated.Text style={descriptionStyle}>
          {activationBoxDescription}
        </Animated.Text>
      </Pressable>
    </ImageBackground>
  </Animated.View>
</Animated.View>

我该怎么做？

【问题讨论】：

标签： react-native animation react-native-navigation

【解决方案1】：

我在这里的一个问题中看到过这样的问题，我也在一个项目中看到过。最常见的就是在导航之前，加一个setTimeOut，这样会造成延迟并且有动画和导航。它看起来像这样：

function handleNavigate() {
 setTimeout(() => {
  navigation.navigate('GeneralQuestions', {
   screen: navigateActivationToPage,
  });
 }, 5000);
}

// ...

<Pressable
  onPress={() => handleNavigate}
/>

然后在 setTimeOut 时间，根据您的动画添加一个有意义的值

【讨论】：