React native 使用动画缩放图像不会永久应用

我尝试在用户按下时增大图像的大小，并在用户再次按下动画API时使用以下方法减小图像的大小：

const [viewState, setViewState]= useState(true);
const scaleAnim = (new Animated.Value(.9))




const scaleOut = () => {

if(viewState){
  Animated.timing(scaleAnim, {
    toValue: 2.2,
    duration: 2000,
    useNativeDriver:true,
  }).start(()=>{setViewState(false)});
}
else{
  Animated.timing(scaleAnim, {
    toValue: .9,
    duration: 700,
    useNativeDriver:true,
  }).start(setViewState(true));
}

 };

    <Animated.View style={{transform:[{scale:scaleAnim}]}} >
      <Image style={styles.image} source={require('../path..')} />
    </Animated.View>


const styles = StyleSheet.create({
  image: {
    width:70,
    resizeMode:"contain",
    height: 45,
    alignSelf: "center",
  },

const[viewState，setViewState]=useState（true）；
常量scaleAnim=（新的动画.Value（.9））
常数扩展=（）=>{
如果（视图状态）{
动画。计时（scaleAnim{
toValue:2.2，
期限：2000年，
useNativeDriver：没错，
}).start（（）=>{setViewState（false）}）；
}
否则{
动画。计时（scaleAnim{
toValue:.9，
持续时间：700，
useNativeDriver：没错，
}).start（setViewState（true））；
}
};
const styles=StyleSheet.create({
图片：{
宽度：70，
resizeMode:“包含”，
身高：45，
对准自己：“居中”，
},

但问题是，每当持续时间结束时，大小都会回到默认值。我想永久保留，当用户再次按下时，我会做相反的操作（减小大小）

---

有什么建议吗？

创建了一个组件，希望这就是您想要的

小吃：

导出默认函数App（）{
const[viewState，setViewState]=React.useState（true）；
const scale=React.useRef（新的动画.Value（1））.current；
const[init，setInit]=React.useState（true）；
React.useffect（（）=>{
if（init）{
setInit（假）；
}否则{
如果（视图状态）{
动画。计时（比例{
toValue:2，
持续时间：1000，
useNativeDriver：没错，
}).start（）；
}否则{
动画。计时（比例{
toValue:0.5，
持续时间：700，
useNativeDriver：没错，
}).start（）；
}
}
}，[viewState]）；
常数扩展=（）=>{
setViewState（！viewState）；
};
返回(
);
}

首先，您需要将动画值设置为

useState

或

useRef

。react本机示例使用useRef，因此我建议您也这样做。我还建议您使用插值进行缩放，以便可以将更多动画绑定到该动画值。结果如下：

const animatedValue=useRef（新的Animated.Value（0））.current；
const[toggle，setToggle]=useState（false）
常数扩展=（）=>{
让动画
如果（！切换）{
动画=动画。计时（动画值{
toValue:1，
持续时间：700，
useNativeDriver：没错，
});
}
否则{
动画=动画。计时（动画值{
toValue:0，
期限：2000年，
useNativeDriver：没错，
});
}
动画。开始（（）=>{
setToggle（！toggle）
})
};
让scaleAnim=animatedValue.interpolate({
输入范围：[0,1]，
输出范围：[0.9,2.2]
})
返回(
);

通过这样做，您可以通过添加另一个插值以任意大小缩放多个图像。但如果您不想这样做：

const scaleOut=（）=>{
让动画
如果（！切换）{
动画=动画。计时（动画值{
toValue:2.2，
期限：2000年，
useNativeDriver：没错，
});
}
否则{
动画=动画。计时（动画值{
toValue:0.9，
持续时间：700，
useNativeDriver：没错，
});
}
动画。开始（（）=>{
setToggle（！toggle）
})
};
返回(
);

如果您想更进一步，请将TouchableOpacity换成可按按钮，将动画放入

动画.loop

中，然后在onPressIn中启动，然后在onPressIn中停止动画，并将设置动画值恢复为初始值：

const onPressIn=（）=>{
动画循环([
动画。计时（动画值{
toValue:2.2，
期限：2000年，
useNativeDriver：没错，
}),
动画。计时（动画值{
toValue:0.9，
持续时间：700，
useNativeDriver：没错，
});
]，{useNativeDriver:true}）.start（）
}
const onPressOut=（）=>{
animatedValue.stop（）
动画。计时（动画值{
toValue:0.9，
持续时间：700，
useNativeDriver：没错，
})
}
返回(
);

export default function App() {
  const [viewState, setViewState] = React.useState(true);
  const scale = React.useRef(new Animated.Value(1)).current;
  const [init, setInit] = React.useState(true);
  React.useEffect(() => {
    if (init) {
      setInit(false);
    } else {
      if (viewState) {
        Animated.timing(scale, {
          toValue: 2,
          duration: 1000,
          useNativeDriver: true,
        }).start();
      } else {
        Animated.timing(scale, {
          toValue: 0.5,
          duration: 700,
          useNativeDriver: true,
        }).start();
      }
    }
  }, [viewState]);

  const scaleOut = () => {
    setViewState(!viewState);
  };

  return (
    <View style={styles.container}>
      <Animated.View style={{ transform: [{ scale }] }}>
        <Image
          style={styles.image}
          source={require('./assets/snack-icon.png')}
        />
      </Animated.View>
      <Button title="animate" onPress={scaleOut} />
    </View>
  );
}