使用新的 "Pressable" 组件平滑过渡？

Question

我一直在使用 TouchableOpacity 以便在我的 React Native 项目中使用，但我有兴趣尝试使用新的 Pressable 组件 - 考虑到它的灵活性 API是。

然而，虽然新的 Pressable API 让我能够根据 pressed 状态轻松更改 style 道具之类的东西，但没有 smooth/animated 过渡就像 TouchableOpacity 中的不透明度一样！相反，转换会在 pressed/unpressed.

时立即发生

使用 Pressable 的最佳方式是什么，同时又能在 pressed/unpressed 样式更改之间实现漂亮、平滑的过渡？我假设我必须以某种方式使用 Animated API？有人有这方面的例子吗？

Answer 1

您可以使用动画 Api 这是动画 Api:

的示例

import React from "react";
import { Pressable, Animated } from "react-native";


const Component = () => {
const animated = new Animated.Value(1);
  const fadeIn = () => {
    Animated.timing(animated, {
      toValue: 0.4,
      duration: 100,
      useNativeDriver: true,
    }).start();
  };
  const fadeOut = () => {
    Animated.timing(animated, {
      toValue: 1,
      duration: 200,
      useNativeDriver: true,
    }).start();
  };

  return (
    <View
          style={{ flex: 1, justifyContent: "center", alignItems: "center" }}
        >
          <Pressable onPressIn={fadeIn} onPressOut={fadeOut}>
            <Animated.View
              style={{
                opacity: animated,
                backgroundColor: "red",
                padding: 50,
                borderRadius: 20,
              }}
            >
              <Text>Text</Text>
            </Animated.View>
          </Pressable>
        </View>
  );
};

动画 Api 文档： https://reactnative.dev/docs/animated

我还建议查看重新动画的库以创建具有原生性能的动画

https://docs.swmansion.com/react-native-reanimated/

使用新的 "Pressable" 组件平滑过渡？

Smooth transitions with the new "Pressable" component?

animation

react-native

expo

react-native-reanimated-v2