使用 Animated.View 不发生动画

问题描述

我正在尝试在 React Native 中制作动画，其中视图在单击时展开。这是我目前拥有的代码。

import {
  ScrollView,StyleSheet,TextInput,Image,Button,pressable,Animated,Easing,} from "react-native";
import * as React from "react";
import { Text,View } from "../components/Themed";
import { useNavigation } from "@react-navigation/native";
import { connectArtist } from "../actions";
import { connect } from "react-redux";
import YouTube from "react-native-youtube";
import WebView from "react-native-webview";
//import Video from 'react-native-video';
import { Video } from "expo-av";
import { MyButton } from "../components/MyButton";

function Featured(props) {
  const navigation = useNavigation();
  let scaleValue = new Animated.Value(0);
  const cardScale = scaleValue.interpolate({
    inputRange: [0,0.5,1],outputRange: [1,1.1,1.2],});
  let transformStyle = {
    ...styles.container,transform: [{ scale: cardScale }],};
  return (
    <pressable>
      <Animated.View style={transformStyle}>
        <Image style={styles.artistimage} source={{ uri: props.uri }} />
        {/* add play on appropriate scroll level */}
        <Video
          source={{
            uri: "http://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4",}}
          rate={1.0}
          volume={1.0}
          isMuted={false}
          resizeMode="cover"
          shouldplay={props.play}
          isLooping
          useNativeControls
          style={{ width: 370,height: 370 }}
        />
        <Text style={styles.artistName}>{props.artistName}</Text>
        <Text style={styles.mediaName}>{props.mediaName}</Text>
        <View style={styles.actionButtons}>
          <MyButton
            text="Own"
            action={() => {
              navigation.navigate("OwnScreen",{
                artistName: props.artistName,mediaName: props.mediaName,uri: props.uri,description: props.description,});
            }}
          />
          <MyButton
            text="Connect"
            action={() => {
              ////console.log("connecting to artists")
              props.connectArtist(props.userInfo,props._id);
            }}
            style={({ pressed }) => [
              {
                backgroundColor: pressed ? "white" : "#03befc",},styles.connect,]}
          />
        </View>
      </Animated.View>
    </pressable>
  );
}

在代码中，我使用了 Animated.View 并使用了 css 样式转换。但是，我没有得到动画。如何确保动画发生？ scaleValue 将 Animated 值设为 0 并调用 interpolate。然后将插值用作 Animated.View 中的样式。这意味着在单击时，应调用动画。但它没有被调用。如何修复此错误？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）